AJAX 是一種用來實現網頁無需刷新即可獲取數據的技術。然而，由于瀏覽器的同源策略限制，使用 AJAX 來獲取不同域名下的數據可能會遇到一些問題。其中一個問題就是無法讀取到不同域名下的 cookie 數據。本文將深入探討 AJAX 同源 Cookie 的問題，并提供解決方案。

同源策略是瀏覽器為了保護用戶隱私和安全而采取的一種安全機制。簡而言之，同源策略要求 AJAX 請求只能發送到與當前頁面具有相同協議、域名和端口的資源。這意味著如果一個頁面加載自 www.example.com，那么該頁面只能向 www.example.com 發送 AJAX 請求。

假設我們有一個網站 A，用戶登錄后，網站會在用戶的瀏覽器中設置一個名為 token 的 cookie，并把用戶的身份信息存儲在其中。現在，我們想要使用 AJAX 獲取網站 B 上的一些數據，但由于跨域限制，我們無法獲取到網站 B 的 cookie。

一種解決方案是在服務器端進行代理。可以通過在網站 A 的服務器端創建一個代理 API，來轉發 AJAX 請求到網站 B，并將獲取到的數據返回給網站 A。這樣，網站 A 就可以通過代理 API 獲取網站 B 的數據，而無需擔心跨域問題。

// 代理 API 的示例
app.get('/proxy', async (req, res) =>{
const url = 'http://www.example.com/api/data'; // 網站 B 的數據 API
const response = await axios.get(url, {
headers: {
Cookie: req.headers.cookie // 將網站 A 的 cookie 轉發給網站 B
}
});
res.send(response.data); // 將獲取到的數據返回給網站 A
});

另一種解決方案是使用 CORS（跨源資源共享）。CORS 允許服務器在響應中添加一個頭部，指示瀏覽器允許跨域訪問該資源。在服務器端，我們可以通過設置 Access-Control-Allow-Origin 頭部來允許特定域名的訪問。

// 服務器端設置 CORS 頭部的示例
app.get('/api/data', (req, res) =>{
res.setHeader('Access-Control-Allow-Origin', 'http://www.example.com'); // 允許 www.example.com 的訪問
res.send('這是來自網站 B 的數據');
});

使用 CORS 的好處是可以在客戶端直接發送 AJAX 請求，而無需通過代理 API。然而，使用 CORS 需要網站 B 的服務器支持，并正確配置響應頭部。如果網站 B 的服務器沒有設置正確的 CORS 頭部，那么瀏覽器將阻止頁面獲取該資源。

綜上所述，使用 AJAX 獲取不同域名下的數據是一項常見的前端任務。我們可以通過代理 API 或使用 CORS 來解決跨域問題，以實現無需頁面刷新的數據獲取。然而，在實際應用中，需要根據具體情況選擇合適的解決方案，以確保數據的安全和隱私。