在Web開發中，Ajax（Asynchronous JavaScript And XML）是一種常用的技術，它可以實現網頁的異步數據交互。然而，Ajax受到同源策略的限制，這給開發者帶來了一定的挑戰。同源策略要求Ajax請求的源（域名、協議和端口）必須與頁面的源一致，否則瀏覽器會阻止該請求。本文將介紹同源策略的具體限制，以及一些常見的應對方法。

同源策略的限制主要包括以下幾個方面：

1. 跨域請求被阻止：如果網頁的源為example.com，那么只有當Ajax請求的目標地址也是example.com才會被瀏覽器允許。例如，如果網頁需要從api.example.com獲取數據，由于源不一致，瀏覽器將會阻止該請求。

$.ajax({
url: 'http://api.example.com/data',
type: 'GET',
success: function(response) {
// 處理響應數據
},
error: function(xhr, status, error) {
// 處理請求錯誤
}
});

2. 無法讀取跨域響應的內容：雖然跨域請求本身可以發送成功，但由于同源策略的限制，瀏覽器不允許讀取響應內容。這意味著無法直接從跨域請求中獲取數據。

$.ajax({
url: 'http://api.example.com/data',
type: 'GET',
success: function(response) {
// 由于同源策略限制，此處無法讀取response的內容
},
error: function(xhr, status, error) {
// 處理請求錯誤
}
});

3. 無法發送跨域請求的Cookie和HTTP認證信息：由于安全問題，瀏覽器不允許跨域請求攜帶Cookie和HTTP認證信息。這意味著跨域請求無法獲取用戶的登錄狀態等敏感信息。

為了應對Ajax受同源策略限制的問題，開發者可以使用以下常見的方法：

1. 使用JSONP（JSON with Padding）：JSONP是一種繞過同源策略的常見技術，它通過在請求URL中添加一個回調函數的名稱來實現。服務器端將數據作為函數調用的參數返回，瀏覽器通過執行該函數來獲取數據。

function handleResponse(data) {
// 處理響應數據
}
var script = document.createElement('script');
script.src = 'http://api.example.com/data?callback=handleResponse';
document.body.appendChild(script);

2. 使用服務器端代理：開發者可以在服務器端創建一個代理接口，將接收到的請求轉發到目標地址，并將響應返回給瀏覽器。由于代理接口與網頁源相同，瀏覽器將允許該請求。

// 服務器端代理接口 example.com/proxy
app.get('/proxy', function(req, res) {
var url = req.query.url;
request(url, function(error, response, body) {
if (!error && response.statusCode === 200) {
res.send(body);
} else {
res.status(500).send('Proxy Error');
}
});
});

3. 使用CORS（Cross-Origin Resource Sharing）：CORS是一種瀏覽器機制，允許服務器在響應中聲明哪些源可以訪問該資源。通過在服務器端設置合適的響應頭，開發者可以控制跨域請求的訪問權限。

// 服務器端設置CORS響應頭
res.set('Access-Control-Allow-Origin', 'http://example.com');
res.set('Access-Control-Allow-Methods', 'GET, POST');
// 客戶端發送跨域請求
$.ajax({
url: 'http://api.example.com/data',
type: 'GET',
success: function(response) {
// 處理響應數據
},
error: function(xhr, status, error) {
// 處理請求錯誤
}
});

總之，Ajax受到瀏覽器同源策略的限制，開發者需要注意如何處理跨域請求。通過使用JSONP、服務器端代理或CORS等方法，可以解決這個問題并實現安全可靠的數據交互。