cors是跨源資源共享機制，允許服務器放寬同源策略限制，實現跨域請求。1)預檢請求：瀏覽器發送options請求詢問服務器是否允許跨域。2)服務器響應：若允許，返回cors頭信息。3)實際請求：通過預檢后，瀏覽器發送請求并包含origin頭。4)服務器處理：檢查origin頭，決定是否允許請求并返回cors頭。
引言
你問我 CORS 是什么？在 H5 前端開發中，CORS（Cross-Origin Resource Sharing，跨源資源共享）是一個關鍵的安全機制，用來解決跨域資源請求的問題。今天我們就來深挖一下這個話題。我會從基礎概念講起，然后詳細分析 CORS 的工作原理，再通過實際的代碼示例來展示如何在項目中應用 CORS。讀完這篇文章，你將對 CORS 有更深入的理解，并且能夠在開發中靈活運用。
基礎知識回顧
在講 CORS 之前，我們得先明白什么是“同源策略”。同源策略是瀏覽器的一個安全功能，它限制了一個源（域、協議、端口）的文檔或腳本如何能與另一個源進行交互。簡單來說，如果你的網頁和要請求的資源不在同一個源下，瀏覽器就會阻止這個請求。
CORS 就是為了解決這個限制而生的。它允許服務器表明哪些源有權限訪問哪些資源。通過在 http 頭中添加特定的字段，服務器可以放寬同源策略的限制，允許跨域請求。
立即學習“前端免費學習筆記（深入）”；
核心概念或功能解析
CORS 的定義與作用
CORS 是一種機制，允許服務器放寬同源策略的限制，允許跨域請求。它的主要作用是讓服務器能夠明確地告訴瀏覽器，哪些源可以訪問它的資源。這對于現代 Web 應用來說至關重要，因為很多應用都需要從不同的源獲取數據。
舉個簡單的例子，假設你有一個前端應用運行在 http://example.com，而你的 API 服務器運行在 http://api.example.com。沒有 CORS，你的瀏覽器會阻止前端應用請求 API 服務器的數據。通過 CORS，API 服務器可以告訴瀏覽器，http://example.com 是有權限訪問它的資源的。
CORS 的工作原理
CORS 的工作原理主要通過 HTTP 頭來實現。當瀏覽器發起一個跨域請求時，它會先發送一個預檢請求（OPTIONS 請求），來詢問服務器是否允許這個跨域請求。如果服務器允許，它會返回一些特定的 HTTP 頭來表明它的意愿。
以下是 CORS 工作的幾個關鍵步驟：
- 預檢請求：瀏覽器發送一個 OPTIONS 請求到服務器，詢問是否允許跨域請求。這個請求會包含一些頭信息，如 Origin、Access-Control-Request-Method 和 Access-Control-Request-Headers。
- 服務器響應：如果服務器允許這個請求，它會返回一些 CORS 相關的頭信息，如 Access-Control-Allow-Origin、Access-Control-Allow-Methods 和 Access-Control-Allow-Headers。
- 實際請求：如果預檢請求通過，瀏覽器會發送實際的請求，并在請求中包含 Origin 頭。
- 服務器處理：服務器會檢查 Origin 頭，并根據 CORS 策略決定是否允許這個請求。如果允許，它會返回相應的 CORS 頭。
這里有一個簡單的 Node.JS 服務器示例，展示如何設置 CORS：
const express = require('express'); const app = express(); app.use((req, res, next) => { res.header('Access-Control-Allow-Origin', '*'); res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept'); next(); }); app.get('/api/data', (req, res) => { res.json({ message: 'Hello from the API!' }); }); app.listen(3000, () => { console.log('Server running on port 3000'); });
這個例子中，我們使用 Express 中間件來設置 CORS 頭，允許所有源訪問我們的 API。
使用示例
基本用法
在前端應用中，使用 CORS 非常簡單。你只需要像平常一樣發起請求，瀏覽器會自動處理 CORS 相關的邏輯。例如，使用 Fetch API：
fetch('http://api.example.com/data') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:', error));
這個請求會自動觸發 CORS 機制，如果服務器設置了正確的 CORS 頭，請求就會成功。
高級用法
在一些復雜的場景下，你可能需要處理預檢請求，或者設置更細粒度的 CORS 策略。例如，你可能只想允許特定的源訪問你的 API：
app.use((req, res, next) => { const allowedOrigins = ['http://example.com', 'http://subdomain.example.com']; const origin = req.headers.origin; if (allowedOrigins.includes(origin)) { res.setHeader('Access-Control-Allow-Origin', origin); } res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept'); res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE'); next(); });
這個例子中，我們只允許特定的源訪問我們的 API，并且設置了更多的 HTTP 方法。
常見錯誤與調試技巧
在使用 CORS 時，常見的錯誤包括：
- CORS 頭未設置：如果服務器沒有設置正確的 CORS 頭，瀏覽器會阻止請求。你可以通過檢查網絡請求的響應頭來確認是否設置了正確的 CORS 頭。
- 預檢請求失敗：如果預檢請求失敗，瀏覽器會阻止實際請求。你可以通過檢查 OPTIONS 請求的響應頭來確認是否設置了正確的 CORS 頭。
調試 CORS 問題時，可以使用瀏覽器的開發者工具來查看網絡請求和響應頭。特別是查看 OPTIONS 請求的響應頭，可以幫助你快速定位問題。
性能優化與最佳實踐
在實際應用中，優化 CORS 的性能主要集中在減少預檢請求的次數和優化服務器響應。以下是一些建議：
- 減少預檢請求：預檢請求會增加網絡開銷，盡量減少它們的次數。例如，可以通過設置 Access-Control-Max-Age 頭來緩存預檢請求的結果。
- 優化服務器響應：確保服務器能夠快速響應預檢請求，減少等待時間。
在編程習慣和最佳實踐方面，建議：
- 代碼可讀性：在設置 CORS 頭時，確保代碼的可讀性和可維護性。使用中間件或庫來簡化 CORS 的設置。
- 安全性：只允許必要的源訪問你的 API，避免設置過于寬松的 CORS 策略。
總的來說，CORS 是一個強大的工具，可以幫助你構建更靈活和安全的 Web 應用。希望這篇文章能幫助你更好地理解和應用 CORS。
