vue-element-admin v4.0+如何跨域调试

前言

我们做vue-element-admin的开发的时候，必然涉及到跨域调试，因为做开发的时候，可能涉及到最少3个域名：

前端开发的域名是localhost:9528
本机后端的域名就不是localhost:9528了，毕竟前后端代码刻意放在同一个域名下就没必要了，所以后端的域名可能是localhost:8080
线上服务器的后端域名，可能是abcd.com

至于其他的，还有：后端程序员的本地API域名、测试服务器的域名等等，就不列了。

所以，除了mock之外，跨域是绝对不可避免的，那么vue-element-admin是怎么支持跨域的？

官方文档

官方关于跨域的介绍在：
https://panjiachen.github.io/vue-element-admin-site/zh/guide/advanced/cors.html
以及
https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/mock-api.html#移除
但是，官方的介绍还是比较笼统，具体怎么操作呢？

我的做法

比如本地后端API的地址是http://localhost:8080/api/baidupan/list，这个端口假设就是调取了某个百度盘的文件列表，具体不多说。

怎么ajax到这个地址的数据呢？

去修改vue.config.js，找到这段：

      [process.env.VUE_APP_BASE_API]: {
        target: `http://127.0.0.1:${port}/mock`,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }

这段的简单意思就是，凡是请求路径包含process.env.VUE_APP_BASE_API的，都使用这个代理，也就是转发到http://127.0.0.1:${port}/mock身上去。那么process.env.VUE_APP_BASE_API的值是什么？就是.env.development文件里写的VUE_APP_BASE_API = '/dev-api'。

这一段代码，就是一个代理，想增加代理，就模仿着写就好了。

所以现在怎么修改？

在这段代码前面（注意，必须是前面）加上一段类似代码，比如：

      [process.env.VUE_APP_BASE_API + '/baidupan/list']: {
        target: `http://localhost:8080/api`,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      },

这个的意思就是凡是包含process.env.VUE_APP_BASE_API + '/baidupan/list'的请求，都转发到http://localhost:8080/api去。不符合要求的，还是用通用的代理。

这样你就可以放心调试'/baidupan/list'了，其他的请求不会受影响的。

从Chrome的Network看，请求依然是从http://localhost:9528/dev-api来的，因为vue-element-admin提供的代理服务器帮你转发到了http://localhost:8080/api，这个对于浏览器是不透明的，所以浏览器只知道数据来自http://localhost:9528/dev-api，也就不认为有跨域的问题了。

是不是很简单？

调试线上后端API也是一样的道理。

最后你可能会有三种或更多种类的代理：

代理本地后端
代理线上后端
代理mock

总之就是加代理就完了。mock代理也就是通用代理一定要放最后就行了。

最后编辑于：2019.07.08 22:53:09