vue proxy 代理问题

使用vue proxy代理

//在config文件下进行代理配置。配置如下:
 proxyTable: {
  '/api': {  //将www.exaple.com 印射为/apis
       target: '127.0.0.1', // 接口域名
       changeOrigin: true, //是否跨域
       pathRewrite: {
         '^/api': ''  //需要rewrite的,置为空
    }
  }

每次新增代理配置,需要重新启动项目。

  1. 问题:修改或新增代理配置后,重新启动项目,发现配置的新配置的代理,没有生效。可以这样解决:
    1. 将项目的端口修改,重新启动。
    2. 关闭服务,将端口号修改回去,再次启动项目。
  2. 问题:配置的代理已经生效,但是实际请求的地址有问题。例如:

    1. 请求如下:
    2. 后台实际收到的url:

    3. 代码:

    4. 正确处理:

    5. 原因:vue中的http代理机制是从上到下,逐个将代理配置进行正则匹配,因为上面已经匹配到了,直接改写,后面的部分保留。

Vue中,可以使用代理proxy)配置来实现服务器代理代理配置可以在项目的vue.config.js文件中进行设置。通过使用代理,可以将前端请求发送到指定的后端接口地址。代理配置可以根据请求路径的不同进行匹配,并将请求转发到对应的后端接口。 在vue.config.js文件中,通过devServer的proxy属性来配置代理。可以为不同的请求路径设置不同的target(后端接口地址),changeOrigin(改变请求源),ws(启用WebSocket代理),secure(禁用安全检查)等属性。 例如,如果需要将请求路径以/abc开头的请求代理到http://XX.XX.XX.XX:8081这个后端接口地址,可以在proxy中进行如下配置: ```javascript devServer: { proxy: { "/abc": { target: "http://XX.XX.XX.XX:8081", changeOrigin: true, ws: true, secure: false } } } ``` 这样,在前端发送的请求中,以/abc开头的请求将被代理到http://XX.XX.XX.XX:8081这个后端接口地址。 另外,如果需要监测多个接口并进行代理,可以在proxy中写多个配置,每个配置对应一个目标后端接口地址。例如: ```javascript devServer: { proxy: { "/zzz": { target: "http://XX.XX.XX.XX:8082", changeOrigin: true, ws: true }, "/xxx": { target: "http://XX.XX.XX.XX:8083", changeOrigin: true, ws: true } } } ``` 这样,请求路径以/zzz开头的请求将被代理到http://XX.XX.XX.XX:8082这个后端接口地址,而请求路径以/xxx开头的请求将被代理到http://XX.XX.XX.XX:8083这个后端接口地址。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值