跨域訪問是在Web開發(fā)中經(jīng)常遇到的一個問題。JavaScript HTTP跨域訪問是指在使用JavaScript發(fā)送HTTP請求時，請求的目標位于另一個域或端口，這時瀏覽器會阻止請求，原因是瀏覽器的同源策略。

同源策略是Web瀏覽器中最重要的安全措施之一。該策略要求Web站點不能從不同源的站點讀取或操作其資源。同源指的是Web頁面的協(xié)議、主機名和端口號完全相同。例如，如果頁面位于http://example.com，頁面上的JavaScript不能在向http://www.example.net發(fā)送GET請求。

在開發(fā)Web應(yīng)用程序時，我們通常需要進行跨域訪問。例如，我們可能要調(diào)用第三方API，或者在客戶端訪問服務(wù)器上托管的靜態(tài)文件。在這種情況下，我們需要了解如何解決JavaScript HTTP跨域訪問的問題。

要解決JavaScript HTTP跨域訪問的問題，有幾種方法可供選擇。下面將介紹一些常見的解決方法。

使用JSONP實現(xiàn)跨域訪問

function jsonp(url, callback) {
let script = document.createElement("script");
script.src = url + "?callback=" + callback;
document.body.appendChild(script);
}
function handleResponse(response) {
console.log(response);
}
jsonp("http://example.com/api/data", "handleResponse");

JSONP（JSON with Padding）是一種hack技術(shù)，允許我們在不違反瀏覽器的同源策略的情況下進行跨域訪問。JSONP利用了html中的script標簽可以跨域加載的特性。通過給script標簽的src屬性指定跨域的URL，并指定一個回調(diào)函數(shù)名，然后在服務(wù)器上生成JavaScript代碼來調(diào)用回調(diào)函數(shù)。調(diào)用完成后，服務(wù)器生成的JavaScript代碼會傳遞數(shù)據(jù)到回調(diào)函數(shù)中。這樣我們就可以獲取到跨域的數(shù)據(jù)了。

使用CORS（跨域資源共享）實現(xiàn)跨域訪問

const xhr = new XMLHttpRequest();
xhr.open("GET", "http://example.com/api/data", true);
xhr.withCredentials = true;
xhr.onload = function() {
console.log(xhr.responseText);
};
xhr.send();

CORS（跨域資源共享）是一種瀏覽器技術(shù)，用于允許跨域訪問。CORS通過Web瀏覽器和Web服務(wù)器之間的頭信息交換來決定是否允許跨域訪問。CORS技術(shù)需要服務(wù)端配合，在服務(wù)端添加一些頭信息即可

Access-Control-Allow-Origin：指定哪些域名可以訪問資源，多個域名之間可以使用逗號隔開，如果值為`*`則表示允許所有域名訪問資源。

Access-Control-Allow-Origin: http://example.com, https://example.net

Access-Control-Allow-Headers：指定客戶端可以使用哪些請求頭信息

Access-Control-Allow-Headers: X-Requested-With, Content-Type, Authorization

Access-Control-Allow-Methods：指定客戶端可以使用的HTTP請求方法

Access-Control-Allow-Methods: POST, GET, OPTIONS

在JavaScript代碼中，我們需要將xhr對象的withCredentials屬性設(shè)置為true以便在請求中設(shè)置cookies并允許跨域訪問。如果服務(wù)端未正確配置，CORS跨域訪問仍將失敗。

使用代理實現(xiàn)跨域訪問

代理是一種非常常見的方式來解決跨域訪問問題。簡單地說，我們可以在同一域內(nèi)使用代理服務(wù)器來代替瀏覽器來訪問第三方API或其他資源。這樣做的好處是不需要使用Jsonp，也不需要CORS，同時我們也不需要通過服務(wù)端來訪問資源。

{
"/api": {
"target": "http://example.com",
"changeOrigin": true,
"pathRewrite": {
"^/api": ""
}
}
}

在上面的配置文件中，我們將當(dāng)前應(yīng)用程序的/api地址轉(zhuǎn)發(fā)到http://example.com，并將響應(yīng)的內(nèi)容返回給客戶端。這樣，當(dāng)我們在客戶端上調(diào)用http://localhost:3000/api/data時，請求將被轉(zhuǎn)發(fā)到http://example.com/data，并將響應(yīng)返回到客戶端。由于代理服務(wù)器和我們的應(yīng)用程序在同一域內(nèi)，所以不會觸發(fā)瀏覽器的同源策略。

總結(jié)

在開發(fā)Web應(yīng)用程序時，JavaScript HTTP跨域訪問是我們常常遇到的問題之一。通過使用JSONP、CORS和代理，我們可以處理這個問題。為了實現(xiàn)可靠的跨域訪問，我們需要詳細了解這些技術(shù)的工作原理以及它們的優(yōu)缺點。