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为随便写的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
    点赞
  • 2
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论

打赏作者

红瓤西瓜

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值