CORS（跨來源資源共用）是一種用於解決跨域問題的方案。 CORS（跨來源資源共用）是一種安全機制，用於在瀏覽器和伺服器之間傳遞數據時，限制來自不同功能變數名稱的請求。在前端開發中，當通過 XMLHttpRequest（XHR）或 Fetch API 發送跨域請求時，如果伺服器沒有正確配置 CORS，瀏覽器 ...
CORS（跨來源資源共用）是一種用於解決跨域問題的方案。
CORS（跨來源資源共用）是一種安全機制，用於在瀏覽器和伺服器之間傳遞數據時，限制來自不同功能變數名稱的請求。在前端開發中，當通過 XMLHttpRequest（XHR）或 Fetch API 發送跨域請求時，如果伺服器沒有正確配置 CORS，瀏覽器會阻止該請求，從而導致請求失敗。說白了，它是一種解決跨域問題的方案。
CORS 允許伺服器指定哪些源可以訪問其資源。在跨域請求中，瀏覽器會發送一個預檢請求（ OPTIONS ）到伺服器，來確定是否允許跨域訪問。預檢請求包含了一些額外的頭信息，比如請求的方法、請求的頭信息等，伺服器需要根據這些信息來判斷是否允許跨域訪問。伺服器返回的響應頭中，需要設置 Access-Control-Allow-Origin 和 Access-Control-Allow-Methods 等欄位來指定允許訪問的源和方法。
以下是一個使用 CORS 解決跨域問題的例子：
客戶端代碼：
fetch('http://CORS.com/api/data', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
mode: 'cors',
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error))
服務端代碼：
const express = require('express');
const app = express();
app.use((req, res, next) => {
res.setHeader('Access-Control-Allow-Origin', ' ');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
next();
});
app.get('/api/data', (req, res) => {
const data = { message: 'Hello, World!' };
res.json(data);
});
app.listen(3000, () => {
console.log('Server listening on port 3000');
});
在上面的例子中，客戶端使用 fetch 發送一個 GET 請求到 http://CORS.com/api/data ，通過設置 mode 為 cors ，告訴瀏覽器需要使用 CORS 方案來解決跨域問題。服務端使用 express 框架，設置 Access-Control-Allow-Origin 等響應頭，指定允許訪問的源和方法。當瀏覽器發送預檢請求時，服務端會返迴響應頭，告訴瀏覽器允許跨域訪問。
它的優點和不足如下：
優點：
1. 安全性高：CORS 是一種安全的跨域訪問解決方案，通過限制允許跨域訪問的源和方法，可以有效地防止惡意攻擊。
1. 靈活性強：CORS 支持不同類型的請求，包括 GET、POST、PUT、DELETE 等，同時也支持不同類型的數據傳輸格式，比如 JSON、XML 等。
1. 使用方便：CORS 只需要在伺服器端設置響應頭，就可以實現跨域訪問，使用方便。
不足：
1. 相容性問題：CORS 在某些舊版的瀏覽器中不支持，需要進行特殊處理。
1. 跨域請求的額外消耗：在使用 CORS 解決跨域請求時，需要發送預檢請求，這會增加請求的時間和帶寬消耗。
1. CSRF 攻擊：雖然 CORS 是一種安全的跨域訪問解決方案，但仍然可能存在 CSRF（Cross-Site Request Forgery）攻擊，需要在使用時加以註意。可以使用 Cookie、Token 或者請求頭中的特定信息來驗證請求是否合法。
