nginx配置請(qǐng)求轉(zhuǎn)發(fā)不生效的實(shí)現(xiàn)
Bug Description
將vue打包部署時(shí)，修改了nginx.conf，在nginx.conf中配置了請(qǐng)求轉(zhuǎn)發(fā)，但是請(qǐng)求轉(zhuǎn)發(fā)不生效，請(qǐng)求返回狀態(tài)碼404。
nginx配置如下：
location ~ ^/api(/|$) {
proxy_next_upstream http_500 http_502 http_503 http_504 error timeout invalid_header;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://localhost:8081; #代理的ip
expires 24;
}
Reproduction Steps
1.編寫vue項(xiàng)目，使用npm run build打包，將打包后的文件夾dist放到nginx的html目錄下。
2.修改nginx.conf，配置請(qǐng)求轉(zhuǎn)發(fā)。
3.啟動(dòng)nginx服務(wù)。
Reason
在本地開(kāi)發(fā)環(huán)境，為了解決跨域問(wèn)題，修改了vue.config.js：
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8081',
changeOrigin: true,
pathRewrite: { '^/api': '' },
ws: true,
secure: false
}
}
}
此處做了路由改寫，實(shí)際后端訪問(wèn)地址為http://localhost:8081/，而nginx配置的代理地址為http://localhost:8081/api，導(dǎo)致請(qǐng)求定向錯(cuò)誤。
Solution
將nginx.conf進(jìn)行路由改寫：
location ~ ^/api(/|$) {
proxy_next_upstream http_500 http_502 http_503 http_504 error timeout invalid_header;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://localhost:8081; #代理的ip
# 將 /api 替換為 /
rewrite ^/api(.*)$ $1 break;
expires 24;
}
正常轉(zhuǎn)發(fā)，請(qǐng)求返回狀態(tài)碼200。
到此這篇關(guān)于nginx配置請(qǐng)求轉(zhuǎn)發(fā)不生效的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)nginx 請(qǐng)求轉(zhuǎn)發(fā)不生效內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了隱藏Nginx版本號(hào)的最簡(jiǎn)單的方法,對(duì)外隱藏Nginx版本號(hào)有利于維護(hù)服務(wù)器安全,需要的朋友可以參考下2015-04-04
Nginx HTTP 配置指令的實(shí)現(xiàn)示例
本文主要介紹了Nginx的配置文件結(jié)構(gòu)和HTTP配置指令,涵蓋了從請(qǐng)求處理到安全、日志、負(fù)載均衡、緩存等各個(gè)方面,具有一定的參考價(jià)值,感興趣的可以了解一下2024-12-12
mac安裝nginx且配置vue/springboot項(xiàng)目過(guò)程(本地/服務(wù)器)
文章涵蓋Mac和Linux安裝Nginx的步驟,包括配置路徑、自啟動(dòng)、端口修改、前端部署及權(quán)限設(shè)置,解決常見(jiàn)問(wèn)題以確保服務(wù)正常運(yùn)行2025-07-07
nginx通過(guò)location配置代理的原理和實(shí)現(xiàn)方式
這篇文章主要介紹了nginx通過(guò)location配置代理的原理和實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-03-03
分享nginx+php-fpm實(shí)現(xiàn)大文件下載排坑的過(guò)程
這篇文章主要介紹了nginx+php-fpm實(shí)現(xiàn)大文件下載排坑的過(guò)程,文中通過(guò)代碼實(shí)例相結(jié)合的形式給大家介紹的非常詳細(xì)，具有一定得參考借鑒價(jià)值，需要的朋友參考下吧2018-08-08
本文詳細(xì)介紹了Nginx的配置文件和虛擬主機(jī)搭建,包括全局配置、I/O事件配置、HTTP與location配置,以及虛擬主機(jī)的三種搭建方式,通過(guò)實(shí)例操作,幫助讀者理解和應(yīng)用Nginx,實(shí)現(xiàn)高性能和安全的Web服務(wù)部署,感興趣的朋友跟隨小編一起看看吧2025-12-12
使用Docker主機(jī)啟動(dòng)Nginx服務(wù)器的完整步驟詳解
Docker是一個(gè)開(kāi)源的容器化平臺(tái),用于輕松地打包、部署和運(yùn)行應(yīng)用程序,而Nginx是一個(gè)高性能的開(kāi)源反向代理服務(wù)器,也是一個(gè)流行的Web服務(wù)器,這篇文章主要給大家介紹了關(guān)于使用Docker主機(jī)啟動(dòng)Nginx服務(wù)器的完整步驟,需要的朋友可以參考下2024-07-07
nginx proxy_pass指令’/’使用注意事項(xiàng)
這篇文章主要介紹了nginx代理配置完之后,nginx配置proxy_pass，需要注意轉(zhuǎn)發(fā)的路徑配置,需要的朋友可以參考下2015-02-02
JUPYTER服務(wù)的NGINX反向代理配置過(guò)程
文章介紹了如何配置Jupyter Notebook和Nginx以支持WebSocket協(xié)議,首先,檢查并生成Jupyter配置文件,設(shè)置密碼,然后,在Nginx配置文件中為Jupyter配置代理,確保支持WebSocket2026-03-03
這篇文章主要介紹了nginx屏蔽指定接口(URL)的操作方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-05-05