返回

跨越界限：使用XMLHttpRequest进行跨域数据传输

前端

在瀏覽器隔閡中尋求突破

當前 Web 開發中，跨域請求的需求日益迫切，XMLHttpRequest 作為瀏覽器內建的非同 чу請求技術，承擔起跨越瀏覽器界線的重任。然而，瀏覽器基於同源策略的安全考量，對跨域請求施加了嚴格限制。

XMLHttpRequest 的跨域局限

XMLHttpRequest 作為瀏覽器原生 API，提供了便捷的非同歩請求機制。然而，預設情況下，XMLHttpRequest 僅能向當前頁面所在域進行請求。這種同源限制基於瀏覽器對用戶數據隱私和網站安全的考量。

突破藩籬：跨越同源障礙

為滿足跨域數據傳輸的需求，開發者們探索出多種技術手段來突破同源限制。這些技術本質上都是基於瀏覽器提供的跨域請求許可機制，讓伺服器響應頭部明確允許特定源進行跨域訪問。

CORS：現代跨域解決方案

跨來源資源共用（CORS）是當前最為廣泛採用的跨域解決方案。CORS 是一種基於伺服器響應頭部設置的跨域機制，允許伺服器明確指定哪些源可以跨域訪問其資源。

XMLHttpRequest.withCredentials 屬性

對於使用 CORS 的跨域請求，XMLHttpRequest 還需要設置 withCredentials 屬性為 true。該屬性允許請求攜帶認證憑據（如 Cookies、認證標記）進行跨域請求。

JSONP：跨域數據傳輸的古老技法

JSONP（JavaScript 填充）是一種較為古老的跨域數據傳輸技術。JSONP 利用 script 標籤的跨域請求特性，將數據封裝在指定回調函數內進行傳輸。

WebSocket：雙向跨域通信管道

WebSocket 是一種基於 TCP 協議的雙向跨域通信管道。與傳統的基於請求-響應的跨域請求機制（如 XMLHttpRequest）相比，WebSocket 允許客戶端與伺服器建立持久連接，實現持續化的雙向數據傳輸。

進階跨域請求技術：探討當代方案

隨著 Web 技術的發展，越來越多的基於 Promise 的非同歩 API 湧現，為跨域數據傳輸提供了更為簡潔易用的解決方案。

EcmaScript Fetch API：原生跨域請求

EcmaScript Fetch API 作為 Web 標準的一部分，提供了原生跨域請求的解決方案。使用 Fetch API，開發者可以更為便捷地發起跨域請求。

Service Worker：無縫的跨域數據獲取

Service Worker 作為瀏覽器中的一個服務工作執行序，可以攔截和響應頁面發起的請求。這一點對於實現跨域數據獲取提供了極佳的技術支撐。

第三方庫：簡化跨域請求

第三方庫，如 Axios、JQuery.ajax 等，進一步簡化了跨域請求的實作。這些庫封裝了底層的複雜跨域請求機制，為開發者提供了簡潔易用的 API。

技術指南：逐步實作跨域請求

步驟一：伺服器端設置 CORS 響應頭部

在伺服器響應頭部中，設置如下內容：

Access-Control-Max-Age: 3600
Access-Control-Origin: https://yourwebsite.com
Access-Control-Request-Method: GET,POST,OPTIONS
Access-Control-Request-Header: x-my-custom-header

步驟二：XMLHttpRequest 跨域請求設置

// 建立 XMLHttpRequest 物件
var xhr = new XMLHttpRequest();

// 設置請求選項
xhr.open('GET', 'https://api.example.com/data.json');
xhr.setRequestHeader('Content-Type', 'application/json');

// 啟用跨域請求
xhr.withCredentials = true;

// 監聽請求狀態
xhr.onload = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    // 成功獲取數據，進行進一步的數據處理
  } else {
    // 請求失敗，顯示錯誤訊息
  }
};

// 發送請求
xhr.send();

步驟三：JSONP 跨域請求設置

// 定義回調函數
function myCallback(data) {
  // 數據傳輸回來後，進行進一步的數據處理
}

// 建立 script 標籤
var script = document.creatElement('script');

// 設置 script 標籤屬性
script.src = 'https://api.example.com/data.json?callback=myCallback';

// 將 script 標籤添加到頁面
document.head.append(script);

步驟四：WebSocket 跨域連接建立

// 建立 WebSocket 物件
var websocket = new WebSocket('wss://api.example.com/ws');

// 監聽 WebSocket 連接建立狀態
websocket.onopen = function() {
  // 連接建立後，發送數據或監聽數據
};

// 監聽 WebSocket 數據訊息
websocket.onmessage = function(event) {
  // 獲取數據訊息，進行進一步的數據處理
};

// 監聽 WebSocket 連接關閉
websocket.onclose = function() {
  // 連接關閉後，顯示錯誤訊息
};

步驟五：使用第三方庫進行跨域請求（以 Axios 為例）

// 安裝 Axios 庫
// $ npm install --save Axios

// 建立 Axios 實例
const instance = Axios.create({
  baseURL: 'https://api.example.com',
});

// 發送 GET 請求
instance.get('/data.json')
  .then(function(response) {
    // 請求成功的回調，響應數據在 response.data 中
  })
  .catch(function(error) {
    // 請求失敗的回調
  });