跨域了？ 裝個插件就夠了！

瀏覽器為了安全引入了同源策略，這直接導致默認情況下前后端域名如果不同，那么則功能會受限。隨著前后端分離的發(fā)展，前端和后端職責的分離，前端會有專門的本地開發(fā)服務器(local dev server)用于本地開發(fā)。這個時候和后端接口聯(lián)調(diào)時就很可能會遇到跨域安全問題。

這本身是瀏覽器的一種安全策略，但是卻對前端開發(fā)造成了影響。如何解決呢？

之前我的解決方式是通過本地代理（node 或 nginx 等服務）解決。基本思路就是給請求響應頭增加大概如下內(nèi)容：

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/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf/related?hl=en-US。

這個插件使用起來非常簡單，只需要點擊切換 on 和 off 的狀態(tài)即可。on 的時候會自動給請求頭增加跨域功能，off 則相當于禁用了插件。

后來我發(fā)現(xiàn)這個插件有些頭不會加上，比如 access-control-expose-headers 。

因此一個「通用的給請求增加頭信息」的插件就有必要了。于是我選擇了 requestly

美中不足是每個規(guī)則只能免費改「一個」頭。不過好消息是你可以新建多個規(guī)則，每個規(guī)則改一個頭就可以白嫖了。

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

requestly 不僅僅可以增加跨域請求頭，理論上可以對請求和響應做任意的修改。因此用來做 mock，統(tǒng)一加參數(shù)等等都是可以的。

基于此，使用瀏覽器擴展就可以徹底解決前端在本地開發(fā)時候遇到的跨域問題了。