使用 Cloudflare Workers 處理前端跨域問題

在 Web Application 走前後端分離的開發時，常會遇到 CORS 的問題，先科普什麼是 CORS，請參考：

Cross-Origin Resource Sharing (CORS) – HTTP | MDN

developer.mozilla.org

Cross-Origin Resource Sharing (CORS) is an HTTP-header based mechanism that allows a server to indicate any origins (domain, scheme, or port) other than its own from which a browser should permit …

—

除了使用 JSONP 的處理方式以外，較快的解決方法有：

前端架設一個 proxy server 提供給前端呼叫使用
後端 server 端透過 nginx 或其他方法允許跨域的 request

兩個方法都存在著，正式環境和測試環境在環境設定上必然有所不同，就差在前端改還是後端改了。

而架設 proxy server 的方法也有兩個常見的作法：

本地環境架設一個 porxy server ，這邊提供一個 vue+ vite 的範例，請參考。
架設一個在網路上的 proxy server

原則上來說第一種方式比較保險的，但可能有種種技術因素導致無法實現，於是第二種方法，我們透過 Cloudfalre 來實現了。

原始碼和別人寫的說明附在最下方，直接講注意事項：

你需要一個 Cloudflare 帳號，並且有存取 Workers and Pages 這個服務的權限。
使用 Worker 服務實作，他是公開的，且免費版有 100k 的次數限制，記得要設定白名單避免被濫用。
要記得前端呼叫的網域要透過環境區分，把這個放上正式環境，呼叫次數可能會爆掉。

2024-08-31 Update

更新一些要注意的事項：

白名單是 request header 中的 Origin ，是來源網址不是 proxy 導向的網址。這如果是後端架設的話得和前端溝通是哪個網址來源。
針對 Worker 裡面的 fix() 方法我做了一些修改，如果有錯誤還請提醒，程式碼如下：

function fix(myHeaders) {
  // myHeaders.set("Access-Control-Allow-Origin", "*");
  myHeaders.set("Access-Control-Allow-Headers", event.request.headers.get("access-control-request-headers"));
  myHeaders.set("Access-Control-Allow-Origin", event.request.headers.get("Origin"));
  if (isOPTIONS) {
    myHeaders.set("Access-Control-Allow-Methods", "GET,HEAD,POST,OPTIONS");

    //myHeaders.set("Access-Control-Allow-Credentials", "true");

    // myHeaders.delete("X-Content-Type-Options");
  }
  return myHeaders;
}

2024-09-01 Update

我 fork 專案，更新了一個在 header 帶 auth 的版本，應該對防止濫用更有幫助。網址如下：