前端开发环境的跨域
前端开发环境的跨域
比较目前常用的跨域方案，并根据业务挨个权衡优缺点。讲真，自从使用这个姿势后，再也回不去了。反正作为靠前端搬砖而活的我，开发过程中已经两年没有用过其他方案了（PS：三指向天），就算接手的项目使用了其他方案，我也会换成本文要介绍的方案。
跨域是指浏览器对不同域下面的资源访问限制。
方案
- nginx
- 后端
- devServer
- 浏览器插件
- 修改浏览器的安全设置
nginx
- 需要上服务器操作
- 危险系数高, 不小心
rm -rf /就玩完 - 服务器是随便能给你玩的吗?
- 用 nginx 为了搞个跨域未免太高射炮打蚊子了
后端
- 你试下行了不, 再试试……再试……再……
- 这东西不是运维搞的吗?
- 前端项目不是好像有个 webpack 代理能配置的吗?
devServer
- 仅 webpack 项目支持
- 从浏览器中不易清楚数据来源
- 必须了解 proxy 配置, 要注意前端资源与后端接口的 url 冲突问题
浏览器插件
- 其他浏览器不能用
- 手机不能用
- 安全性未知
关闭浏览器的跨域防护
- 其他浏览器不能用
- 手机不能用
- 给自己带来数据泄露风险
分析
经过对比, 发现上面的方案要么受制于人, 要么很不通用, 不方便.
关闭浏览器的安全设置, 只能在自己的浏览器上使用, 如果你想在手机上测试或发前端页面给别人访问的时候, 跨域也是存在的.
nginx/后端 这个方案, 一般的解决办法要么都是直接把前端页面代理为同源, 要么都是设置响应头的允许访问域为 *, 但其实设置为 * 却不能解决很多跨域问题, 例如是否携带 cookie, 是否允许携带/读写对应的请求头/响应头字段, 如果没有仔细研究, 就会导致配置一个跨域总是配不好的情况.
目前大多数方案, 是使用脚手架自带的 devServer.proxy 进行代理, 其原理就是由于在开发环境中, 前端项目是通过一个 http 服务启动的, 然后通过 devServer.proxy 来进行后端接口的代理. 结果就是前端发起请求时, 走的还是同一个 http 服务, 就不存在跨域问题了.
但这又带一些问题:
- 修改 devServer 必须重启整个前端项目
- 如果你的项目是普通的静态 html 页面怎么办
- 从浏览器的 network 面板难以分辨请求的接口实际地址
- 无法脱离开发环境使用
解决
假设我们要跨域的服务是: http://httpbin.org/, 如果只需要随便在任何位置运行下面的一行命令即可:
mockm proxy=http://httpbin.org/
如果你没有安装这个工具, 可以下面的方法免安装使用:
npx mockm proxy=http://httpbin.org/
这时候默认代理出来的结果是, 所有访问 http://127.0.0.1:9000/ 的请求就相当于访问原服务, 并且已经不存在跨域问题了.
如果我们还要对其他服务进行跨域怎么办呢?
如果要配置服务比较多, 我们可以创建一个配置文件:
// mm.config.js
module.exports = {
proxy: {
'/': `http://www.httpbin.org/`, // 跨域到httpbin
'/qq/': `https://c.y.qq.com/`, // 跨域到QQ音乐
'/sina/': `https://www.sina.com.cn/`, // 跨域到新浪
}
}
可以看到同时能跨域和请求多家网站后端服务的接口, 并且控制台还显示出了请求日志.
总结
- 不局限于是不是 webpack 创建的项目
- 更改实时生效，无需重启，不会导致前端项目刷新
- 更简洁，易于理解
- 可以方便获得额外的辅助技能
