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.編寫(xiě)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 } } }
此處做了路由改寫(xiě),實(shí)際后端訪問(wèn)地址為http://localhost:8081/
,而nginx配置的代理地址為http://localhost:8081/api
,導(dǎo)致請(qǐng)求定向錯(cuò)誤。
Solution
將nginx.conf進(jìn)行路由改寫(xiě):
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 rewrite重寫(xiě)規(guī)則
這篇文章主要介紹了詳解常用的nginx rewrite重寫(xiě)規(guī)則,Nginx的rewrite功能是使用nginx提供的全局變量或自己設(shè)置的變量,結(jié)合正則表達(dá)式和標(biāo)志位實(shí)現(xiàn)url重寫(xiě)以及重定向。感興趣的可以一起來(lái)了解一下2019-03-03Windows Server 2016 MySQL數(shù)據(jù)庫(kù)安裝配置詳細(xì)安裝教程
這篇文章主要介紹了Windows Server 2016 MySQL數(shù)據(jù)庫(kù)安裝配置詳細(xì)安裝教程,需要的朋友可以參考下2017-08-08Nginx單IP地址配置多個(gè)SSL證書(shū)的方法示例
這篇文章主要介紹了Nginx單IP地址配置多個(gè)SSL證書(shū)的方法示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11使用Nginx實(shí)現(xiàn)301跳轉(zhuǎn)至https的根域名示例代碼
這篇文章主要介紹了使用Nginx實(shí)現(xiàn)301跳轉(zhuǎn)至https的根域名,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04centos環(huán)境下nginx高可用集群的搭建指南
為了防止Nginx單點(diǎn)故障造成服務(wù)器癱瘓,本文介紹了Nginx實(shí)現(xiàn)高可用集群構(gòu)建,下面這篇文章主要給大家介紹了關(guān)于centos環(huán)境下nginx高可用集群的搭建指南,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07Nginx應(yīng)用之Location路由反向代理及重寫(xiě)策略示例
本篇文章主要介紹了Nginx應(yīng)用之Location路由反向代理及重寫(xiě)策略示例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-02-02