[CORS] 運用代理工具繞過 CORS 機制：Cors-Anywhere

發表於 更新於 閱讀次數：

說明

CORS 阻擋是「瀏覽器」的安全機制，流程大致如下：

request 與 response 流程示意圖

當後端伺服器沒辦法立即修復 cors 問題時，我們可以使用「代理伺服器」來繞過 cors 檢查。

Cors-Anywhere

Cors-Anywhere 是非常簡單好用的 cors 代理工具，Cors-Anywhere 可以把伺服器回應加上 cors headers 再送回瀏覽器，瀏覽器自然不會阻擋這些「合法」的回應，流程大致如下：

Cors-Anywhere 代理流程示意圖

代理機制

正向代理

當代理伺服器協助的對象是 client 端時便是正向代理，代理伺服器會協助 client 端與目的伺服器溝通，除了能像 Cors-Anywhere 一樣幫助 client 端修改回應 headers，因為目的伺服器不知道 client 端的實際 IP，也可以用來繞過 IP 限制（俗稱的翻牆）。

反向代理

當代理伺服器協助的對象是 server 端時便是反向代理，當我們連線到 A 網站，A 網站的伺服器環境有設置反向代理，這時我們以為連到 A 網站的 IP，實際上是代理伺服器的 IP，代理伺服器接收後再轉發給 A 伺服器，這個作法可以隱藏應用服務伺服器的實際 IP，避免遭受外部的直接攻擊，也常用於負載平衡，讓代理伺服器分配處理的伺服器。

在維基百科中 Reverse proxy 的示意圖可以看到，Proxy 和 Server 處於同一個 Internal network（內網）。

Wiki - Reverse proxy

Cors-Anywhere 是「正向代理」還是「反向代理」？

在網路上搜尋 Cors-Anywhere 相關的文章會發現許多文章寫到 Cors-Anywhere 是反向代理伺服器，因為 Cors-Anywhere 的 repo description 中確實寫著他是 reverse proxy（反向代理），但是在 repo 的 README 文件中已經拿掉 reverse 這個詞，就只是個 proxy（代理伺服器）。

代理伺服器是一個協助轉發連線請求、伺服器回應的中間人（伺服器），通常不會特別加註正向或是反向，若要分類，可以從他協助的對象和使用目的來區分。
Cors-Anywhere 可以是「正向代理」、也可以是「反向代理」，取決於使用場景，

  • 當 Cors-Anywhere 建置在與 server 相同的內網環境中，並且協助 server 接收連線請求，便是反向代理。

  • 實際狀況通常是，前端開發者串接後端 api 時遇到 cors 問題，又沒辦法請後端即時處理，這種時候不太可能還有辦法到後端的環境建置 Cors-Anywhere，而是透過外部網域的 Cors-Anywhere 來代理前端的連線，這種情況下 api server 仍然是直接接收來自外部的請求，只是請求方透過 proxy 轉發請求，便是正向代理。

Cors-Anywhere 使用方法

我們可以選擇直接使用作者建置的 demo，或是複製該專案回來自己架設到免費雲端平台上。

直接使用作者的 Demo

作者提供的網站只是一個 Demo，並不是專業的服務平台，當連線過多的時候就無法使用，只適合練習時使用，連線量多時使用自己架設的服務較佳。

  1. 進入作者的 Demo 網站。

  2. 點擊網頁上的「Request temporary access to the demo server」按鈕。

  3. 點擊完按鈕後，稍等一下，網站會顯示「You currently have temporary access to the demo server.」，就可以開始使用。

  4. 回到自己的程式編輯器，修改原本的請求網址，在原始網址前面加上作者的 Demo 網址 https://cors-anywhere.herokuapp.com/ ，完成後就可以測試連線了。

修改範例：

  • 原本有 cors 問題的網址請求：
  • axios.get('https://a.b.c/')
  • 加上 Cors-Anywhere 的請求：
  • axios.get('https://cors-anywhere.herokuapp.com/https://a.b.c/')

自己架設

可以參考這篇文章 Andy Lien - [指南] 前端工程師開發必備的 Heroku + Node.js 佈署自己的 CORS 轉址伺服器 完成建置，佈署到 Heroku 之後就會取得自己的 APP 網址，在請求的網址前面加上這個 APP 網址即可。

參考文章：