前端解决跨域--proxy

最新推荐文章于 2024-08-23 16:48:21 发布

原创最新推荐文章于 2024-08-23 16:48:21 发布 · 3.4k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

前端专栏收录该内容

4 篇文章

订阅专栏

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

一：普通代理

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