Vue-CLI优雅的解决跨域问题

跨域问题一直是前端上线调试的一个坑，在 webpack 时代，我们需要开启一种更好的跨域调试方式。

什么是跨域问题

这是浏览器的一种安全机制，同源策略，即浏览器不能执行其他网站的脚本。
说的比较笼统，可以理解为浏览器只允许网站和同一域名的服务器通过xhr传输数据。注意是xhr请求，通常点一个链接或者使用 JS 跳转页面是不会有跨域问题的。

解决方法

解决方法是很多的，细数的话有 5 种以上。

公司解决跨域问题的常见方法

1. 一般都是后端允许跨域即后端在响应头加上Access-Control-Allow-Origin:*，这是一劳永逸的方法，可以在测试期间允许跨域，项目部署好之后再禁止跨域。

利用 Vue 调试服务器优雅的解决

首先要明确为什么推荐这样使用

1. 大家都知道 Vue 是数据驱动，离开了数据 Vue 基本上不能呈现想要的页面。 所以在 Vue 调试的时候都是需要连接后端的。
2. 如果部署到 API 服务器，首先 Vue 通过 webpack 打包，然后上传到服务器，这样的确可以解决跨域问题，但是流程复杂，而且在多个人开发一个项目的时候不能协同开发。
3. Vue-CLI 初始化项目正好自带了开发服务器，不用再安装别的软件或者模块，操作简单。

解决方法

笼统的来说是通过反向代理，前端开发者可能对于这些不太了解，但是我们知道怎么做就行了。

1. 在调试的时候打开 devServer，npm run serve或者npm run dev，看具体配置。
2. 这时会启动一个localhost服务器，具体端口看配置文件，通常是localhost:8080。
3. 这时需要配置配置文件了，让这个 devServer 进行代理，因为服务器是没有同源策略限制的。
4. 配置文件关于代理部分的配置.
5. vue.config.js 中的 devServer.proxy 选项来配置。
6. devServer.proxy 可以是一个指向开发环境 API 服务器的字符串：

vue.config.js

module.exports = {
    devServer: {
        proxy: "http://imakerlab.cn",
    },
};

这会告诉 devServer 将任何未知请求 (没有匹配到静态文件的请求) 代理到http://imakerlab.cn
如果你想要更多的代理控制行为，也可以使用一个 path: options成对的对象。完整的选项可以查阅http-proxy-middleware

vue.config.js

module.exports = {
    devServer: {
        proxy: {
            "/api": {
                target: "http://imakerlab.cn/api",
                ws: true,
                changeOrigin: true,
            },
            "/foo": {
                target: "http://imakerlab.cn/foo",
            },
        },
    },
};

其实这个 devSever 就是webpack-dev-server，所以vue.config.js的devServer参数完全可以按照webpack-dev-server配置。

开发实例

比如说：将/api开头的 API 转到http://imakerlab.cn

vue.config.js

module.exports = {
    //...
    devServer: {
        proxy: {
            "/user": { target: "http://imakerlab.cn" },
        },
    },
};

这样，当我们链接写/user/2333的时候，就会访问http://imakerlab.cn/user/2333，而不是localhost:8080/user/2333。这样浏览器表面访问的是localhost，但实际访问的是imakerlab.cn，很好的解决了跨域问题。
当然，开发服务器同样支持 url 重写，仔细去看看官方文档吧！

本文作者：KylinLee

本文链接：https://kylin.dev/2020/02/21/Vue-CLI优雅的解决跨域问题

版权声明：本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。