通过nginx代理vue,vue再访问后端时出错记录
项目场景:
项目场景:项目上线测试环境 使用nginx代理出现问题
问题描述
通过nginx代理vue,vue再访问后端时,后端地址被替换成为了代理地址 例如 : 代理地址为 127.0.0.1:8081 前端访问地址为 127.0.0.1:8888 后端访问地址为 127.0.0.1:8066
此时,正常访问的后台接口应该为 127.0.0.1:8066/xxx/xxx,但我此时的情况是 127.0.0.1:8081/xxx/xxx
原因分析:
解决方案:
这个时候需要更改nginx配置 以及前端项目配置,如下:
const request = axios.create({
// API 请求的默认前缀
baseURL: baseURL+"/api", //****设置好前缀,用于nginx监听之后重定地址*****
timeout: 6000
})
server {
listen 8081;
server_name localhost;
location / {
root xxxxdist;
index index.html index.htm;
}
#log设置代理地址下指定前缀的操作
location /api/{
rewrite ^/api/(.*)$ /$1 break;
proxy_pass http://localhost:8066;
}
