跨域了? 裝個外掛就夠了!

lucifer發表於2022-02-06

瀏覽器為了安全引入了同源策略,這直接導致預設情況下前後端域名如果不同,那麼則功能會受限。 隨著前後端分離的發展,前端和後端職責的分離,前端會有專門的本地開發伺服器(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,統一加引數等等都是可以的。

基於此,使用瀏覽器擴充套件就可以徹底解決前端在本地開發時候遇到的跨域問題了。

相關文章