备注:vue和nginx都做了地址代理,但是vue中的重写更改了地址,导致nginx代理失效(找不到)的问题;

问题场景:

1.vue中的地址代理(有问题的写法)

目录:/config/index.js中的proxyTable:

'/upload':{
        target : 'http://192.168.1.123:8007',  //目标地址   192.168.1.123为随便写的ip
        changeOrigin:true,  // 允许跨域
        pathRewrite: {  //地址重写
          '^/upload': '/gt'
        }
}

注意其中的pathRewrite;
/gt为后台项目接口的统一路径前缀(后台项目名,接口都放在/gt之下)

2.在nginx服务器上的地址代理

目录:/usr/local/nginx/conf/server.conf
注意:此目录指向为作者当前所安装nginx目录与配置的文件;读者要根据自己所安装的环境来配置;多数是在nginx.conf文件中配置

location /upload {
        proxy_pass http://127.0.0.1:8007/gt;  // 地址代理,指向当前nginx服务器地址
        client_max_body_size 100m; // 对上传文件的大小做限制:100M;环境默认为1M;
}

问题详解:

1.在vue中,使用proxyTable后,所写的‘/upload’表示前端的代理地址;
主要应用场景为:前后端联调时;
2.vue中,加上了pathRewrite表示将地址重写,即:将/upload改为了/gt
3.nginx中,对/upload做了地址代理和上传文件大小限制

问题原因:
上述2和3中,导致了对地址代理的不统一性;nginx对/upload做了代理,结果vue首先对/upload做了重写为/gt,这样nginx就找不到了/uoload,此时就会导致项目发布后,接口丢失等问题;

正确的写法

'/upload':{
        target : 'http://192.168.1.123:8007/gt',  //目标地址   192.168.1.123为随便写的ip
        changeOrigin:true,  // 允许跨域
        pathRewrite: {  //地址重写
          '^/upload': ''
        }
}

将/gt放在目标地址中,让pathRewrite重写为空,或直接不写pathRewrite;
此时就不影响nginx的地址代理了;

问题:

vue和nginx都有地址代理,那么到底实际发布项目后,这个地址到底是听谁的呢?
答:
前提:不出现作者上方所说的重写的问题;
则项目发布上线至nginx后,地址代理以nginx为准!!!

Logo

前往低代码交流专区

更多推荐