處理 CORS 問題：完整指南

 

跨網域資源共享 (CORS) 是一種允許 Web 應用程式從與提供網頁的網域不同的網域請求資源的機制。雖然這是現代 Web 應用程式的基本功能，但它也會帶來複雜性，特別是當請求因安全性策略而被阻止時。本指南將介紹 CORS 是什麼、為什麼它很重要、常見問題以及在前端開發中處理 CORS 的最佳實踐。
 

什麼是 CORS？

 

CORS是瀏覽器實現的安全功能，用於防止惡意網站未經許可存取其他網域上的資源。它使用 HTTP 標頭來確定是否允許來自一個來源（網域）的請求存取另一個來源上的資源。
基本上，一個網域無法存取另一個網域的數據，以防止應用程式和所有內容受到惡意程式、病毒等的侵害。在這種情況下，伺服器應該知道使用 CORS 配置的允許網域的詳細資訊。
 

關鍵 CORS 標頭

 

1. Access-Control-Allow-Origin：指定哪些來源可以存取資源。
    

2. Access-Control-Allow-Methods：指定允許哪些 HTTP 方法（GET、POST 等）。
    

3. Access-Control-Allow-Headers：指定在實際請求期間可以使用哪些 HTTP 標頭。
    

4. Access-Control-Allow-Credentials：指示當憑證標誌為 true 時是否可以公開對請求的回應。
    

5. Access-Control-Expose-Headers：指定哪些標頭可以作為回應的一部分公開。
    

6. Access-Control-Max-Age：表示預檢請求的結果可以快取多久。
    

為什麼 CORS 很重要

 

CORS 對於安全至關重要，可以防止未經授權的存取敏感資訊。但是，嚴格的 CORS 策略也會阻礙合法的 API 請求，從而導致 Web 應用程式出現功能問題。了解並正確配置 CORS 對於確保安全性和功能性至關重要。
 

常見的 CORS 問題

 

1. 被 CORS 策略阻止：當伺服器不包含適當的 CORS 標頭時會發生這種情況。
    

2. 預檢請求失敗：當發出預檢請求（OPTIONS）且伺服器未正確回應時。
    

3. 憑證請求：當包含 cookie 或驗證標頭時，伺服器必須明確允許憑證。
    

處理 CORS 的最佳實踐

 

在本文中，我們將使用 cors npm 函式庫，它可以作為快速中間件輕鬆傳遞，也可以與 React 一起使用
首先，透過運行指令安裝cors

npm install cors

1. 伺服器端設定  

處理 CORS 問題最有效的方法是設定伺服器允許跨網域請求。最佳方法是在伺服器端配置 CORS，以便前端 (React.js) 可以與後端無縫通訊。這涉及到設定幾個屬性
 

範例：Node.js 與 Express
 

const express = require('express');
const cors = require('cors');
const app = express();

const corsOptions = {
  origin: 'http://example.com', // specify the allowed origin
  methods: 'GET,POST,PUT,DELETE', // allowed methods
  allowedHeaders: 'Content-Type,Authorization', // allowed headers
  credentials: true, // allow credentials
};

app.use(cors(corsOptions));

app.get('/api/data', (req, res) => {
  res.json({ message: 'This is CORS-enabled for only example.com.' });
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

您可以使用 * 表示方法，allowedHeaders 允許每個方法或標頭

起源屬性：

// specify the allowed origin (single domain),
origin: 'http://example.com',

// configure cors to set the origin to the request origin 
origin:true 

// set multiple domains
origin:["http://example.com","https://demo.com"] 

1. 在前端處理 CORS  

如果您無法控制伺服器或在開發過程中需要快速解決方案，您可以在前端處理 CORS 問題。
 

範例：在 React 中使用代理
 

使用 React 時，您可以在 package.json 中設定代理，將 API 請求重新導向到後端伺服器，從而繞過 CORS 問題。
 

{
  "name": "your-app",
  "version": "1.0.0",
  "proxy": "http://localhost:5000"
}

 

結論

 

處理 CORS 問題是開發的重要組成部分。透過了解 CORS 機制並實施本指南中概述的最佳實踐，您可以確保 Web 應用程式保持安全，同時在不同網域中正常運作。無論您是設定伺服器、設定代理程式或使用第三方服務，這些策略都將協助您有效管理 CORS。
請記住，雖然快速修復可能對開發和測試有用，但正確的伺服器端配置是在生產環境中處理 CORS 的最可靠方法。
 

以了解更多資訊並開始使用 Dualite，請造訪我們的官方網站

以上是處理 CORS 問題：完整指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！