通过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;
        }
经验分享 程序员 微信小程序 职场和发展