「Access-Control-Allow-Origin」標頭如何啟用跨來源資源共用（CORS）？

揭秘CORS 中的「Access-Control-Allow-Origin」標頭

跨來源資源共享(CORS) 使從一個來源載入的JavaScript 程式碼能夠存取資源來自不同的起源。了解「Access-Control-Allow-Origin」標頭如何促進這種跨來源存取至關重要。

「Access-Control-Allow-Origin」如何運作

當客戶端要求來自不同來源的資源，伺服器可以使用「Access-Control-Allow-Origin」標頭回應。該標頭指定允許哪些來源存取該資源。預設行為是拒絕所有跨域請求。

要啟用跨網域訪問，伺服器必須將「Access-Control-Allow-Origin」標頭新增至回應。此標頭的值可以是特定網域（例如“http://siteB.com”）或“*”，表示允許任何來源存取該資源。

處理非簡單問題請求

對於非簡單請求，通常涉及 GET 或 POST 之外的 HTTP 方法或非標準請求標頭，瀏覽器首先發送預檢 OPTIONS 要求。此請求驗證伺服器是否會接受預期的請求。

如果伺服器使用適當的「Access-Control-Allow-Headers」和「Access-Control-Allow-Methods」標頭回應 OPTIONS 請求，則瀏覽器繼續處理實際請求。

範例用法

考慮以下內容場景：

網站A： https://siteA.com
網站B： https://siteB.com

至啟用從網站A 下載的JavaScript程式碼來存取網站B 上的資源：

1. 網站A：從網站B 取得JavaScript 程式碼：

fetch('https://siteB.com/myCode.js')
  // ...

2. 站點B：使用“Access-Control-”服務“myCode.js”允許來源' header:

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

3. JavaScript（網站 A）： JavaScript 程式碼現在可以向網站 B 發出請求：

fetch('https://siteB.com/api/data')
  // ...

透過了解「Access-Control-Allow-Origin」標頭的工作原理，可以有效地啟用跨域資源共享，確保 JavaScript程式碼可以無縫存取不同來源的資源。

以上是「Access-Control-Allow-Origin」標頭如何啟用跨來源資源共用（CORS）？的詳細內容。更多資訊請關注PHP中文網其他相關文章！