vue的proxyTable的地址代理和重定向,配合nginx的地址代理问题
备注:vue和nginx都做了地址代理,但是vue中的重写更改了地址,导致nginx代理失效(找不到)的问题;问题场景:1.vue中的地址代理(有问题的写法)目录:/config/index.js中的proxyTable:'/upload':{target : 'http://192.168.1.123:8007',//目标地址192.168.1.123为随便写...
备注: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为准!!!
更多推荐
所有评论(0)