乐趣区

关于前端:跨域了-装个插件就够了

浏览器为了平安引入了同源策略,这间接导致默认状况下前后端域名如果不同,那么则性能会受限。随着前后端拆散的倒退,前端和后端职责的拆散,前端会有专门的 本地开发服务器 (local dev server) 用于本地开发。这个时候和后端接口联调时就很可能会遇到跨域平安问题。

这自身是浏览器的一种安全策略,然而却对前端开发造成了影响。如何解决呢?

之前我的解决形式是通过本地代理(node 或 nginx 等服务)解决。基本思路就是给申请响应头减少大略如下内容:

Access-Control-Allow-Origin: https://foo.example
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
Access-Control-Max-Age: 86400

起初我应用了更不便的工具:浏览器扩大。之后跨域问题便能够一去不复返。

刚开始的时候用的是一个专门给申请加跨域头的插件 Allow CORS: Access-Control-Allow-Origin,地址:https://chrome.google.com/web…。

这个插件应用起来非常简单,只须要点击切换 on 和 off 的状态即可。on 的时候会主动给申请头减少跨域性能,off 则相当于禁用了插件。

起初我发现这个插件有些头不会加上,比方 access-control-expose-headers。

因而一个 通用的给申请减少头信息 的插件就有必要了。于是我抉择了 requestly

美中不足是每个规定只能收费改 一个 头。不过好消息是你能够新建多个规定,每个规定改一个头就能够白嫖了。

地址:https://app.requestly.io

requestly 不仅仅能够减少跨域申请头,实践上能够对申请和响应做任意的批改。因而用来做 mock,对立加参数等等都是能够的。

基于此,应用浏览器扩大就能够彻底解决前端在本地开发时候遇到的跨域问题了。

退出移动版