在網絡應用程序中，經常會遇到需要在不同域名的網頁之間進行數據交互的情況。這種情況下，瀏覽器的同源策略會限制JavaScript腳本跨域訪問另一個域，而這樣的限制就需要使用跨域采集技術來實現。本文將詳細介紹JavaScript 跨域 采集的相關知識。

首先，我們先來解釋一下同源策略（Same-Origin Policy）的概念。同源策略是瀏覽器安全機制的一部分，它約束一個頁面從不同源加載或執行其他網頁的腳本的行為。源指的是協議、域名、端口三者的組合。如果兩個網頁的協議、域名、端口都相同，那么它們屬于同一個源，就可以共享數據了。如果兩個網頁的協議、域名、端口不同，那么它們就不屬于同一個源，就需要使用跨域采集技術。

// 比如，假設當前網頁的地址是：http://www.example.com
// 則下面兩個網頁都與當前網頁不是同源
http://www.baidu.com
https://www.example.com

下面我們就來了解一下JavaScript 跨域 采集的方法。常見的跨域采集方法包括JSONP、CORS和代理。這三種方法都具有各自的優缺點，使用時根據具體情況進行選擇。

JSONP是一種使用script標簽的跨域數據交互方式，它利用HTML文檔中的script標簽不受同源策略限制的特點，發送一個GET請求并包含一個callback參數，服務器會將數據拼接成一個函數調用返回給客戶端，客戶端通過調用該函數拿到數據。下面是一個JSONP的例子：

<script>
function callback(data) {
console.log(data);
}
var script = document.createElement('script');
script.src = 'http://www.example.com/jsonp.php?callback=callback';
document.head.appendChild(script);
</script>

CORS是一種通過在服務端設置響應頭來支持跨域的方法，它利用HTTP頭部中的Origin字段和Access-Control-Allow-Origin字段進行數據交互。CORS支持GET和POST請求，下面是一個CORS的例子：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.example.com/data.php', true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
};
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('Origin', 'http://www.example.com');
xhr.send();

代理是一種將客戶端請求通過服務器中轉來實現跨域的方法，它的原理是客戶端向服務器發送一個請求，服務器接收到之后再將請求轉發給另一個服務器，當第二個服務器返回響應后，服務器再將響應轉發給客戶端。下面是一個代理的例子：

var xhr = new XMLHttpRequest();
xhr.open('POST', '/proxy.php', true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
};
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({
url: 'http://www.example.com/data.php',
method: 'GET'
}));

以上就是JavaScript 跨域 采集的三種方法，它們各有優缺點，需要根據實際情況進行選擇。