了解 CORS：JavaScript 中的安全性跨源資源共享

CORS（跨來源資源共享）

CORS（跨來源資源共用） 是 Web 瀏覽器實作的安全功能，用於控制如何從與資源來源不同的網域（來源）要求資源。它在現代 Web 開發中至關重要，尤其是在使用 API 時，因為它可以防止未經授權的資源存取並確保資料的安全交換。

---

1.什麼是原點？

起源由以下組合定義：

• 協議：（例如，http、https）
• 網域：（例如 example.com）
• 埠：（例如：80、：443）

範例：

• https://example.com 和 http://example.com 是不同的來源。
• https://example.com:3000 和 https://example.com:4000 也是不同的來源。

---

2.同源政策 (SOP)

同源策略是一種安全措施，用來限制網頁上的資源與其他來源的資源互動的方式。

• 範例：未經明確許可，從 https://example.com 載入的腳本無法從 https://api.otherdomain.com 取得資料。

雖然 SOP 確保了安全性，但它限制了合法的跨域請求，這就是 CORS 的用武之地。

---

3.什麼是 CORS？

CORS 是一種機制，允許伺服器透過在回應中包含特定的 HTTP 標頭來指定誰可以存取其資源。這些標頭指示瀏覽器是否應允許用戶端存取所要求的資源。

---

4. CORS 的工作原理

當瀏覽器發出跨網域請求時，它會檢查伺服器的回應標頭以確定是否允許該請求。

關鍵步驟：

1. 飛行前請求（可選）：
   
   對於某些類型的請求，瀏覽器會傳送初始 OPTIONS 請求來檢查實際請求是否被允許。

2. 伺服器回應：
   
   伺服器在回應中包含適當的 CORS 標頭。

3. 瀏覽器決策：
   
   如果標頭符合瀏覽器的期望，則資源被共用；否則，瀏覽器會阻止該請求。

---

5.重要的 CORS 標頭

請求標頭：

• Origin: 指定請求的來源。 範例：來源：https://example.com

回應標頭：

• Access-Control-Allow-Origin: 指定允許哪些來源存取資源。
  
  範例：Access-Control-Allow-Origin：https://example.com

• Access-Control-Allow-Methods: 指定允許的 HTTP 方法。
  
  範例：存取控制允許方法：GET、POST、PUT

• Access-Control-Allow-Headers: 指定可以在請求中傳送的自訂標頭。
  
  範例：存取控制允許標頭：內容類型、授權

• Access-Control-Allow-Credentials: 指示是否可以傳送憑證（cookie、HTTP 驗證）。
  
  範例：存取控制允許憑證：true

---

6. CORS 請求的類型

1. 簡單請求：

   • 這些是簡單的請求（例如 GET、POST），沒有自訂標頭，也沒有預檢。

2. 預檢請求：

   • 對於具有自訂標頭、憑證或 GET 或 POST 以外的方法的請求，瀏覽器會發送預檢 OPTIONS 請求以確保伺服器允許。

3. 憑證請求：

   • 包含 cookie 等憑證的請求需要 Access-Control-Allow-Credentials 標頭。

---

7.範例：CORS 實際應用

客戶端 JavaScript：

伺服器回應標頭：

---

8.在伺服器端程式碼中處理 CORS

使用 Express 的 Node.js 範例：

---

9.常見 CORS 問題與修復

1. 錯誤：要求的資源上不存在「Access-Control-Allow-Origin」標頭。

   • 修復：確保伺服器包含 Access-Control-Allow-Origin 標頭。

2. 錯誤：憑證請求要求「Access-Control-Allow-Credentials」為 true。

   • 修復：將 Access-Control-Allow-Credentials 設為 true 並確保 Access-Control-Allow-Origin 不是 *。

3. 預檢請求失敗：

   • 修正：確保伺服器正確回應具有所需 CORS 標頭的 OPTIONS 請求。

---

10。 CORS的優點

• 透過允許受控資源共享來增強安全性。
• 促進不同網域之間的 API 整合。
• 支援多種配置以滿足應用需求。

---

11。 CORS 的限制

• 需要動態來源的 API 的配置複雜度。
• 某些 API 上的預檢請求的開銷增加。
• 由於瀏覽器強制執行，錯誤通常很難調試。

---

12。結論

CORS 是 Web 應用程式中安全且功能性的跨域資源共享的重要功能。透過了解並正確配置伺服器上的 CORS 標頭，您可以確保網域之間的通訊順暢且安全，同時遵守 Web 安全標準。

嗨，我是 Abhay Singh Kathayat！
我是一名全端開發人員，擁有前端和後端技術的專業知識。我使用各種程式語言和框架來建立高效、可擴展且用戶友好的應用程式。
請隨時透過我的商務電子郵件與我聯繫：kaashshorts28@gmail.com。

以上是了解 CORS：JavaScript 中的安全性跨源資源共享的詳細內容。更多資訊請關注PHP中文網其他相關文章！