如何使用xhr.setrequestheader來自定義HTTP請求頭部信息

HTTP請求頭是HTTP請求中的一部分。它們帶有客戶端信息、瀏覽器信息和其他信息，以指定請求目標、請求內容類型等。這些信息對於伺服器來說至關重要，伺服器需要通過它們來判斷請求的真實性和目的。然而，在某些情況下，我們需要覆蓋默認的HTTP請求頭中的信息或添加一些自定義信息，以適應我們的業務需求。在這樣的場景下， ‘XMLHttpRequest.setRequestHeader()’ 方法可以派上用場。

一、XMLHttpRequest是什麼？

在介紹如何使用 ‘XMLHttpRequest.setRequestHeader()’ 方法之前，我們先介紹一下什麼是XMLHttpRequest。

XMLHttpRequest對象是一個JavaScript API，它提供了在客戶端瀏覽器和Web伺服器之間發送HTTP請求和接收HTTP響應的機制。使用它，我們可以非同步地從伺服器獲取數據並更新頁面，而無需重新載入整個頁面。當然，它也可以將數據從客戶端發送到伺服器。

在以下示例中，我們使用XMLHttpRequest對象從伺服器獲取JSON數據和圖片。

// AJAX獲取JSON數據
let xhr = new XMLHttpRequest();
xhr.open("GET", "http://example.com/data.json", true);

xhr.onreadystatechange = function() {
  if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
    let data = JSON.parse(this.responseText);
    console.log(data);
  }
};

xhr.send();

// AJAX獲取圖片
let xhr = new XMLHttpRequest();
xhr.open("GET", "http://example.com/image.png", true);
xhr.responseType = "blob";

xhr.onreadystatechange = function() {
  if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
    let imageBlob = this.response;
    let imgUrl = URL.createObjectURL(imageBlob);
    let img = document.createElement("img");
    img.src = imgUrl;
    document.body.appendChild(img);
  }
};

xhr.send();

二、XMLHttpRequest.setRequestHeader()方法

XMLHttpRequest對象提供了 ‘setRequestHeader(header, value)’ 方法，用於設置HTTP請求頭。它應該在調用 ‘send()’ 方法前調用。

該方法接受兩個參數：header 和 value。header表示要設置的HTTP頭的名稱，value表示該頭部的值。如果您已經調用了 ‘setRequestHeader()’ 方法，則更改也可以使用第二個參數來設置。

以下是一個例子，其中我們使用該方法設置了 ‘Content-Type’、’X-Requested-With’ 和 ‘Authorization’ HTTP請求頭：

let xhr = new XMLHttpRequest();
xhr.open("POST", "http://example.com/submit", true);

xhr.setRequestHeader("Content-Type", "application/json");
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
xhr.setRequestHeader("Authorization", "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9");

xhr.onreadystatechange = function() {
  if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
    console.log("Request Sent");
  }
};

xhr.send(JSON.stringify({name: "John", age: 30 }));

在上面的示例中，我們向 ‘http://example.com/submit’ 發送了一個POST請求，並設置了三個HTTP請求頭，即 ‘Content-Type’、’X-Requested-With’ 和 ‘Authorization’。我們還通過 ‘JSON.stringify’ 方法將對象轉化為JSON字元串，並將其發送到伺服器。

三、XMLHttpRequest.upload對象

在上傳文件或通過AJAX提交表單時，我們可能需要設置一些自定義HTTP請求頭，如 ‘Content-Type’ 和 ‘X-Requested-With’ 等。此時，我們可以使用 ‘XMLHttpRequest.upload’ 對象。

‘XMLHttpRequest.upload’ 對象是一個只讀的XMLHttpRequest事件目標，它表示一個文件或一組文件的上傳進度。它有自己的事件監聽器，我們可以使用 ‘XMLHttpRequest.upload.addEventListener()’ 來註冊它。

以下示例演示了如何上傳文件和設置HTTP請求頭：

let formData = new FormData();
formData.append("file", fileInput.files[0]);

let xhr = new XMLHttpRequest();
xhr.open("POST", "http://example.com/upload", true);

xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");

xhr.upload.addEventListener("progress", function(event) {
  if (event.lengthComputable) {
    let percentComplete = event.loaded / event.total;
    console.log("Upload Progress: " + percentComplete);
  }
});

xhr.onreadystatechange = function() {
  if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
    console.log("File Uploaded");
  }
};

xhr.send(formData);

在上面的示例中，我們使用 ‘FormData’ 對象來將文件數據以二進位形式發送到伺服器。我們還設置了 ‘X-Requested-With’ HTTP請求頭以標識這是一個AJAX請求。我們還使用 ‘XMLHttpRequest.upload.addEventListener()’ 方法來跟蹤上傳進度。最後，我們通過 ‘xhr.send(formData)’ 方法將FormData對象發送到伺服器。

四、使用CORS時的自定義HTTP請求頭

添加並自定義 HTTP 請求頭時，需要注意使用 CORS（跨域資源共享）的限制。在使用 CORS 時，請求頭信息的設置需要伺服器端的支持。伺服器需要在響應頭中添加 ‘Access-Control-Allow-Headers’ 欄位，以允許客戶端可以攜帶哪些請求頭信息。這些信息可以添加到自定義請求頭中。

以下代碼片段演示了如何添加基本身份驗證到CORS請求：

let xhr = new XMLHttpRequest();
xhr.open("GET", "http://example.com/api/data", true);
xhr.withCredentials = true;
xhr.setRequestHeader("Content-Type", "application/json");
xhr.setRequestHeader("Authorization", "Basic " + btoa("username:password"));

xhr.onreadystatechange = function() {
  if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
    console.log(JSON.parse(this.responseText));
  }
};

xhr.send();

在上面的示例中，我們使用 ‘XMLHttpRequest.withCredentials’ 屬性設置憑據標誌，以允許發送cookie和其他憑據信息。我們還設置了 ‘Content-Type’ 和 ‘Authorization’ 請求頭。此外，由於需要使用身份驗證，我們將使用 ‘btoa()’ 方法將用戶名和密碼轉換為基本身份驗證令牌，並將其添加到請求頭中。最後，我們將請求發送到伺服器。

五、總結

在開發Web應用程序時，我們通常需要在HTTP請求頭中添加自定義信息，以滿足我們的特定需求。通過使用 ‘XMLHttpRequest.setRequestHeader()’ 方法，我們可以輕鬆地添加和修改HTTP請求頭內容。請確保在使用CORS時記得添加允許的請求頭信息。