Vue-代理服务器跨域

本文最后更新于：2 个月前

在Vue的前端开发中，跨域是一个比较难以理解的问题，尽管配置很简单，但是遇到些问题是真不好解决，还不能调试。
在查阅众多帖子后，还是一知半解，都说的比较模糊，这里我把我的想法写一下。

网络中的解决方案

网络中，通常是在vue.config.js文件中，做如下操作，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
devServer: {
    host: "localhost",
    port: 8081, // 端口号
    https: false, // https:{type:Boolean}
    open: true, //配置自动启动浏览器
    // proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理
    // 配置多个代理
    proxy: {
        "/api": {
            target: "http://localhost:8088/",// 要访问的接口域名
            ws: true,// 是否启用websockets
            changeOrigin: true, //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
            pathRewrite: {
                '^/api': '' //这里理解成用'/api'代替target里面的地址,比如我要调用'http://localhost:8088/user/list'，直接写'/api/user/list'即可
            }
        }
    }
}

这里的代理说的就比较暧昧，或者说不太明确

代理的逻辑

在我一顿思索后，把大概逻辑摸索了一下
假如你后台服务器的地址是

1
http://www.abc.com/path/user/getInfo

如果我们想在使用axios请求操作的时候是

1
axios.get('/api/user/getInfo')

所以在配置文件里面应该这么写

1
2
3
4
5
6
7
8
"/api": {
    target: "http://www.abc.com/path",
    ws: true,
    changeOrigin: true, 
    pathRewrite: {
        '^/api': ''
    }
}

当使用axios请求的时候

1
axios.get('/api/user/getInfo')

这里的接口替换规则可能是这样的
首先请求本地的接口

1
http://localhost:8088/api/user/getInfo

接下来替换域名

1
http://www.abc.com/path/api/user/getInfo

然后匹配路径/api，匹配到就替换为空，所以结果为

1
http://www.abc.com/path/user/getInfo

跨域配置的逻辑更像是在另一个服务器的接口地址中从中间插入了一个flag，flag左边的是代理服务器（可以是带路径的url），flag的右边是我们请求的url

代理转发的bug

  • 每次修改代理配置的时候只能重启
  • 浏览器有缓存
  • 长时间修改同一个配置会导致缓存存在，造成代理不成功的假象，实际上已经成功了