在前端開發中，跨域資源共享（CORS）是一個常見的問題。它涉及到瀏覽器安全機制，防止網頁從一個域獲取資源時被另一個域阻止。錯誤信息如“Access to XMLHttpRequest at 'xxx' from origin 'has been blocked by CORS policy'”是典型的跨域問題。本文將詳細解釋CORS的工作原理，并提供幾種解決跨域問題的方法。

一、CORS的基本原理

CORS（Cross-Origin Resource Sharing）是一種瀏覽器技術，它允許服務器通過設置HTTP頭來決定哪些來源可以訪問資源。CORS頭包括：

• Access-Control-Allow-Origin：指定哪些域可以訪問資源。
• Access-Control-Allow-Methods：指定允許的HTTP方法（如GET, POST）。
• Access-Control-Allow-Headers：指定允許的HTTP頭。
• Access-Control-Allow-Credentials：指示是否可以發送Cookie。

二、解決跨域問題的方法

1. 服務器設置CORS頭

在服務器端，通過設置適當的CORS頭來允許跨域訪問。

示例：在Node.js Express服務器中設置CORS頭

const express = require('express');
const app = express();app.use((req, res, next) => {res.header('Access-Control-Allow-Origin', '*'); // 允許所有來源res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE'); // 允許的方法res.header('Access-Control-Allow-Headers', 'Content-Type'); // 允許的頭next();
});app.get('/api/data', (req, res) => {res.json({ message: 'This is CORS-enabled for all origins!' });
});app.listen(3000, () => {console.log('CORS-enabled web server listening on port 3000');
});
?

注意：Access-Control-Allow-Origin: *?允許所有來源訪問資源，在生產環境中應慎用，可以改為特定域名。

2. JSONP（JSON with Padding）

JSONP是跨域請求的一種傳統方法，但僅限于GET請求。它通過動態插入script標簽來實現。

示例：

<script>function handleResponse(response) {console.log('Data:', response);}
</script>
<script src="https://example.com/api/data?callback=handleResponse"></script>
?

服務器端（Node.js Express）：

app.get('/api/data', (req, res) => {const callback = req.query.callback;const data = { message: 'This is a JSONP response' };res.send(`${callback}(${JSON.stringify(data)})`);
});
?

3. 使用代理服務器

通過設置代理服務器，將請求轉發到目標服務器，避免直接跨域。

示例：在Vue CLI中配置代理

// vue.config.js
module.exports = {devServer: {proxy: {'/api': {target: 'https://example.com',changeOrigin: true,pathRewrite: {'^/api': ''}}}}
};
?

4. 在Nginx中配置CORS

通過Nginx反向代理設置CORS頭。

示例：

server {listen 80;server_name example.com;location /api/ {proxy_pass http://backend_server;add_header Access-Control-Allow-Origin *;add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';add_header Access-Control-Allow-Headers 'Content-Type, Authorization';add_header Access-Control-Allow-Credentials true;}
}
?

5. 使用瀏覽器插件

在開發過程中，可以使用瀏覽器插件來臨時解決CORS問題，如CORS Unblock。

三、CORS的常見配置錯誤及解決方法

1. Access-Control-Allow-Origin設置不正確

錯誤：服務器未設置?Access-Control-Allow-Origin或設置不正確。

解決：確保服務器正確設置?Access-Control-Allow-Origin頭。

res.header('Access-Control-Allow-Origin', 'https://your-allowed-origin.com');
?

2. 預檢請求（OPTIONS）失敗

錯誤：服務器未處理預檢請求，導致跨域請求失敗。

解決：確保服務器正確處理OPTIONS請求。

app.options('/api/data', (req, res) => {res.header('Access-Control-Allow-Origin', 'https://your-allowed-origin.com');res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');res.header('Access-Control-Allow-Headers', 'Content-Type');res.send();
});
?

3. Access-Control-Allow-Credentials設置不正確

錯誤：Access-Control-Allow-Credentials設置為?true，但?Access-Control-Allow-Origin設置為?*。

解決：當設置?Access-Control-Allow-Credentials為?true時，Access-Control-Allow-Origin不能為?*，必須為具體的域名。

res.header('Access-Control-Allow-Origin', 'https://your-allowed-origin.com');
res.header('Access-Control-Allow-Credentials', 'true');