了解 CORS 在 Web 瀏覽器中的工作原理

跨來源資源共享(CORS) 是Web 瀏覽器中的一項關鍵安全功能，它控制Web 應用程式如何從不同網域請求資源（例如資料、影像或腳本）比提供初始網頁的網頁。它的主要目的是保護用戶免受試圖訪問其他網站上敏感資訊的惡意網站的侵害。本部落格將解釋 CORS 的工作原理以及為什麼它對於 Web 開發至關重要。
什麼是 CORS？
簡單來說，CORS 是一種瀏覽器機制，用來控制網頁可以從不同網域請求哪些資源。預設情況下，瀏覽器會實施同源策略 (SOP)，該策略限制網頁向載入頁面以外的網域發出請求。此策略是一項基本安全功能，可防止網站之間潛在的有害互動。

但是，在許多情況下，合法的跨來源請求是必要的，例如，當 Web 應用程式需要從託管在不同伺服器上的 API 取得資料時。 CORS 透過允許伺服器指定允許哪些網域存取其資源，以安全的方式啟用此類請求。

CORS 如何運作？
CORS 的工作原理是為伺服器的回應新增 HTTP 標頭，指示是否允許跨來源請求。以下是 CORS 運作方式的分步分析：

客戶提出請求
當網頁嘗試向不同來源（由網域、協定和連接埠定義）發出請求（例如，透過 XMLHttpRequest、fetch 或腳本包含）時，瀏覽器會檢查該請求是否違反同源策略。

CORS 預檢請求（對於複雜請求）
某些請求，特別是那些使用 PUT、DELETE 或自訂標頭等方法的請求，被認為是「複雜的」。在發送實際請求之前，瀏覽器會發送 OPTIONS 請求，稱為預檢請求。此預檢請求詢問伺服器是否允許實際請求並驗證允許的 HTTP 方法、標頭和來源。

伺服器使用 CORS 標頭回應
接收預檢或實際請求的伺服器傳回帶有特定標頭的回應，指示該請求是否被允許。關鍵標頭包括：

Access-Control-Allow-Origin：此標頭指定允許哪些網域存取該資源。如果此標頭包含請求的來源，則瀏覽器允許回應。例如，伺服器可能會回應：

Access-Control-Allow-Origin: https://example.com

Access-Control-Allow-Methods：此標頭指定伺服器允許跨來源請求的 HTTP 方法（GET、POST、PUT 等）。

Access-Control-Allow-Methods: GET, POST

Access-Control-Allow-Headers：指定實際請求中可以包含哪些自訂標頭。

Access-Control-Allow-Headers: Content-Type, Authorization

Access-Control-Allow-Credentials：如果伺服器允許憑證（cookie、HTTP 驗證），則將包含此標頭並設為 true。

瀏覽器決定
收到伺服器的回應後，瀏覽器評估標頭。如果伺服器透過適當的 CORS 標頭授予權限，瀏覽器將允許跨來源請求並處理回應。如果不是，瀏覽器會阻止請求，網頁無法存取該資源。

簡單 CORS 請求範例
考慮這樣一個場景：https://example.com 上託管的網頁嘗試向 https://api.example.com/data 託管的 API 發出 GET 請求。

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

在這種情況下，瀏覽器將請求發送到 https://api.example.com。如果 API 伺服器配置為允許來自 https://example.com 的請求，它將使用標頭回應：

Access-Control-Allow-Origin: https://example.com

如果標頭缺失或不正確，瀏覽器將因 CORS 政策而阻止回應。

CORS 預檢範例
對於更複雜的請求，瀏覽器會發起預檢請求，檢查是否允許跨網域請求。以下是觸發預檢的 PUT 請求範例：

fetch('https://api.example.com/update', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ key: 'value' })
});

瀏覽器發送如下所示的 OPTIONS 請求：

OPTIONS /update HTTP/1.1
Origin: https://example.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: Content-Type

伺服器應回應標頭，指示是否允許此要求：

Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: PUT
Access-Control-Allow-Headers: Content-Type

如果這些標頭存在且有效，瀏覽器將繼續執行實際的 PUT 請求。

CORS 的重要性
CORS 是一項安全功能，為 Web 伺服器提供細粒度的機制來控制對其資源的存取。如果沒有 CORS，惡意網站可以在未經使用者同意的情況下輕鬆從其他網域取得敏感數據，從而導致跨站請求偽造 (CSRF) 等安全漏洞。

結論
了解 CORS 對於使用 API 和第三方資源的 Web 開發人員至關重要。透過在伺服器上設定適當的 CORS 策略，開發人員可以確保其應用程式保持安全，同時仍啟用合法的跨網域互動。

如果您正在開發 Web 應用程式並遇到 CORS 錯誤，則必須檢查伺服器的配置並確保在回應中發送必要的標頭。

以上是了解 CORS 在 Web 瀏覽器中的工作原理的詳細內容。更多資訊請關注PHP中文網其他相關文章！