前端解决跨域--proxy

本文介绍了Vue项目中使用vue.config.js配置代理解决跨域问题的方法,包括普通代理和pathRewrite的使用。通过设置proxy,可以将本地请求转发到指定的后台接口域名,实现API的调用。当后台接口命名不统一时,pathRewrite可以重写路径,确保请求正确转发。例如,将'/mine'重写为'/',使得axios.get('/mine/test')能够正确转发到'http://e.dxy.net/test'。全局代理则更简单,直接将http://e.dxy.net设为代理目标。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一:普通代理

vue 中的 proxy 是利用了 Node 代理

vue.config.js 中配置:

module.exports = {
            devServer: {
              proxy: {
                  '/api': {
                      target: 'http://e.dxy.net',  // 后台接口域名
                      ws: true,        			  //如果要代理 websockets,配置这个参数
                      secure: false,  			  // 如果是https接口,需要配置这个参数
                      changeOrigin: true,  		  //是否跨域
                  }
              }
            }
        }

1;假设你要调取的接口是 http://e.dxy.net/api/test

2:axios.get(’/api/test’)

3:我们一般调接口 axios.get(’/api/test’),这样调是自动请求的当前域名,也就是本地就调用
localhost:8080/api/test

4:配置代理后,会做如下转发:

 localhost:8080/api/test  => http://e.dxy.net/api/test

二:用到pathRewrite的情况

1:当你调接口后端的命名没有统一给接口前加 /api 这类的标识,那么你可以自己加

2:假设你

	有一个的接口是 http://e.dxy.net/test,
    有一个的接口是 http://e.dxy.net/node,
    有一个的接口是 http://e.dxy.net/list

3:如果还是上面的配置,调用axios.get(’/test’),就会出现404的情况,因为代理中配置的是”/api“,不会走代理,此时需要用到 pathRewrite

4:我们将配置改为如下:

devServer: {
  proxy: {
      '/mine': {
          target: 'http://e.dxy.net',  // 后台接口域名
          ws: true,        //如果要代理 websockets,配置这个参数
          secure: false,  // 如果是https接口,需要配置这个参数
          changeOrigin: true,  //是否跨域
          pathRewrite:{
              '^/mine': '/'
          }
      }
  }
}

5:此时调用例子中的接口我们可以手动加类似标识,保持和配置一致:

 	axios.get('/mine/test')
    axios.get('/mine/node')
    axios.get('/mine/list')

6:此时的转发变成:

localhost:8080/mine/test    =>   http://e.dxy.net/mine/test   =>   http://e.dxy.net/test

7:这里pathRewrite配置的意思是将路径中的/mine重写为/

8:这样就能解决跨域啦。

(注:在浏览器调试工具的network中看到的路径还是 localhost:8080/mine/test)

三:全局代理

devServer: {
 proxy: 'http://e.dxy.net'
}

参考资料:https://blog.youkuaiyun.com/weixin_43972437/article/details/107291071

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值