报错:405 not allowed
原因:vue代理地址在nginx反向代理到正式环境不生效
很多更改配置的方法都不生效,同时引发新问题,比如返回html而非json响应。
这是开发环境配置的vue.config.js是这样:
"/map": {
target: "http://xxx", // 将请求代理到后端的地址
changeOrigin: true,
pathRewrite: {
"^/map": "", // 重写路径,后端接受到的将不带/map
},
},
"/wms": {
target: "http://xxx", // 将请求代理到后端的地址
changeOrigin: true,
pathRewrite: {
"^/wms": "", // 重写路径,后端接受到的将不带/map
},
},
[process.env.VUE_APP_BASE_API]: {
target: `http://localhost:8080`,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
}
},
解决方法
在Nginx中配置Vue应用的反向代理,以便将对Vue应用的请求转发到不同的后端服务地址,可以在Nginx配置文件中使用
location
指令和proxy_pass
指令来实现。以下是一个配置示例:
nginx.conf
http {
server {
listen 80;
location /api1/ {
proxy_pass http://backend1_address/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
location /api2/ {
proxy_pass http://backend2_address/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
location / {
proxy_pass http://frontend_server_address;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}
}
在这个配置中,当请求以
/api1/
开头时,它们被转发到http://backend1_address/
,以/api2/
开头的请求被转发到http://backend2_address/
,其他请求被转发到http://frontend_server_address
。确保替换
backend1_address
、backend2_address
和frontend_server_address
为实际的后端服务地址。同时,根据实际的需求调整proxy_set_header
指令中的配置。