Getting Started with HTTP CORS

Published by johnson on

Getting Started with HTTP CORS

在網站開發上，跨來源資源共用是一種很常使用的技巧，但由於跨來源以後就會衍伸出許多權限及安全問題，因此 HTTP 有了 CORS（Cross-Origin Resource Sharing） 相關的規範。

CORS 的運作方式是藉由加入新的 HTTP 標頭讓伺服器能夠描述來源資訊以提供瀏覽器讀取。同時，也會針對會造成副作用的 HTTP 請求方法，規範要求瀏覽器以 OPTIONS 向對方送出 預檢請求（Preflighted），以確認後續請求是否可安全送出。

What requests use CORS？

以下為常見會使用到 CORS 的 request：

  • 使用 XMLHttpRequest 或 Fetch API 進行跨站請求
  • Web fonts
  • WebGL textures
  • CSS 樣式表

Simple Requests（簡單請求）

在跨站請求中，HTTP 有規範幾種標準的 request 是不會觸發 CORS 預檢請求的，我們稱之為 Simple Requests。

允許的 HTTP method：

  • GET
  • HEAD
  • POST

允許的 Header：

  • Accept
  • Accept-Language
  • Content-Language
  • Content-Type
  • Last-Event-ID
  • DPR
  • Save-Data
  • Viewport-Width
  • Width

其中 Content-Type 只允許 application/x-www-form-urlencoded、multipart/form-data、text/plain 三種值。

Preflighted（預檢請求）

如果未符合 Simple Requests 的標準，瀏覽器便會以 OPTIONS 發出預檢請求（Preflighted）。

HTTP OPTIONS

會發出預檢請求的 HTTP method：

  • PUT
  • DELETE
  • CONNECT
  • OPTIONS
  • TRACE
  • PATCH

Notice： 只要有自訂的 Header 便不符合 Simple Requests 的規範，瀏覽器就會送出 預檢請求（Preflighted）。

HTTP response headers

另一方面，伺服器端也要設定相對應的標頭，以規範請求的來源。

Header Description
Access-Control-Allow-Origin 設定可以存取資源的 URI
Access-Control-Max-Age 預檢請求的結果可以被 cache 多長的時間
Access-Control-Allow-Methods 存取資源所允許的 HTTP method
Access-Control-Allow-Headers 指定可以使用哪些 HTTP headers
Access-Control-Expose-Headers 允許瀏覽器存取回應標頭的白名單

範例

Access-Control-Allow-Origin: https://blog.johnsonlu.org
Access-Control-Allow-Methods: GET,POST,PUT
Access-Control-Allow-Headers: Content-Type, X-Requested-With, Authorization, X-Verify-Key
Categories: HTTP
Tags: