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
1
2
3
4
5
module.exports = {
devServer: {
proxy: "http://imakerlab.cn",
},
};

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

vue.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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.jsdevServer参数完全可以按照webpack-dev-server配置

开发实例

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

vue.config.js
1
2
3
4
5
6
7
8
module.exports = {
//...
devServer: {
proxy: {
"/user": { target: "http://imakerlab.cn" },
},
},
};

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

评论

Your browser is out-of-date!

Update your browser to view this website correctly.&npsb;Update my browser now

×