跨網域資源共享 (CORS) 是一種允許 Web 應用程式從與提供網頁的網域不同的網域請求資源的機制。雖然這是現代 Web 應用程式的基本功能，但它也會帶來複雜性，特別是當請求因安全性策略而被阻止時。本指南將介紹 CORS 是什麼、為什麼它很重要、常見問題以及在前端開發中處理 CORS 的最佳實踐。
CORS是瀏覽器實現的安全功能，用於防止惡意網站未經許可存取其他網域上的資源。它使用 HTTP 標頭來確定是否允許來自一個來源（網域）的請求存取另一個來源上的資源。
基本上，一個網域無法存取另一個網域的數據，以防止應用程式和所有內容受到惡意程式、病毒等的侵害。在這種情況下，伺服器應該知道使用 CORS 配置的允許網域的詳細資訊。
Access-Control-Allow-Origin：指定哪些來源可以存取資源。
Access-Control-Allow-Methods：指定允許哪些 HTTP 方法（GET、POST 等）。
Access-Control-Allow-Headers：指定在實際請求期間可以使用哪些 HTTP 標頭。
Access-Control-Allow-Credentials：指示當憑證標誌為 true 時是否可以公開對請求的回應。
Access-Control-Expose-Headers：指定哪些標頭可以作為回應的一部分公開。
Access-Control-Max-Age：表示預檢請求的結果可以快取多久。
CORS 對於安全至關重要，可以防止未經授權的存取敏感資訊。但是，嚴格的 CORS 策略也會阻礙合法的 API 請求，從而導致 Web 應用程式出現功能問題。了解並正確配置 CORS 對於確保安全性和功能性至關重要。
被 CORS 策略阻止：當伺服器不包含適當的 CORS 標頭時會發生這種情況。
預檢請求失敗：當發出預檢請求（OPTIONS）且伺服器未正確回應時。
憑證請求：當包含 cookie 或驗證標頭時，伺服器必須明確允許憑證。
在本文中，我們將使用 cors npm 函式庫，它可以作為快速中間件輕鬆傳遞，也可以與 React 一起使用
首先，透過運行指令安裝cors
npm install cors
處理 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"]
如果您無法控制伺服器或在開發過程中需要快速解決方案，您可以在前端處理 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中文網其他相關文章！
