JavaScript setRequestHeader方法詳解

在JavaScript中，setRequestHeader是XMLHttpRequest對象提供的一個非常重要的方法，其作用是為請求頭增加一個自定義的HTTP請求頭信息。該方法通常用於AJAX應用程序的交互，可以控制數據傳入和傳出的格式及數據結構來與伺服器進行交互。本文將從多個方面闡述setRequestHeader的相關內容。

一、setRequestHeader方法使用介紹

setRequestHeader是XMLHttpRequest對象中的一個方法，用於為請求頭增加一個自定義的HTTP請求頭信息。其語法格式如下所示：

XMLHttpRequest.setRequestHeader(header,value)

其中， header表示自定義請求頭信息的名稱，value表示該請求頭信息對應的值。下面是一個代碼示例：

var xhr=new XMLHttpRequest();
xhr.open("POST","/api/user/save",true);
xhr.setRequestHeader('Content-Type','application/json;charset=utf-8');
xhr.send(JSON.stringify({"name":"John", "age":30}));

上面代碼中，xhr表示XMLHttpRequest對象，open方法用於指定HTTP請求的方法、URL以及是否採用非同步方式。setRequestHeader方法用於指定請求頭信息的名稱和對應的值。send方法用於向伺服器發送請求，這裡將JSON對象轉為字元串發送到伺服器。

二、setRequestHeader的常用場景

setRequestHeader通常被用於以下場景：

1. 設置Content-Type

setRequestHeader很常用的一個場景就是設置Content-Type，該屬性指定請求數據的類型和字符集。以下是一個應用案例：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange=function()
{
    if (xhr.readyState==4 && xhr.status==200)
    {
        console.log(xhr.responseText);
    }
}
xhr.open("POST","/api/user/save",true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("name=John&age=30");

在上面的代碼中，通過setRequestHeader方法設置Content-Type為application/x-www-form-urlencoded。然後將請求頭和請求體data發給伺服器。

2. 設置Authorization

需要通過Authorization請求頭信息來驗證身份，以訪問特定資源的API場景：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.github.com/user/repos', true);
xhr.setRequestHeader('Authorization', 'Bearer ' + access_token);
xhr.onload = function () {
  console.log(xhr.responseText);
};
xhr.send();

在上述代碼中，除了設置了HTTP請求類型和請求方式之外還設置了Authorization請求頭，以便API使用者授權請求。access_token為GitHub API請求授權所用到的令牌。

3. 設置Cookie

可以使用setRequestHeader方法設置Cookie，如下所示：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange=function(){
 if (xhr.readyState==4 && xhr.status==200){
 console.log(xhr.responseText);
 }}
xhr.open('GET','/api/auth/login',true);
xhr.setRequestHeader('Cookie', 'name=value');
xhr.send();

這裡設置了一個Cookie請求頭信息name=value來傳遞登錄狀態到伺服器端，並指定了API的登錄路徑/api/auth/login。

三、setRequestHeader的注意事項

1. 請求頭信息的內容必須是ASCII字元

可使用encodeURIComponent界面函數將中文字元進行轉義。

var xhr = new XMLHttpRequest();
xhr.onreadystatechange=function(){
if (xhr.readyState==4 && xhr.status==200){
console.log(xhr.responseText);
}}
xhr.open('GET','/api/auth/login',true);
xhr.setRequestHeader('Cookie', 'name=' + encodeURIComponent('value'))
xhr.send();

2. 只能在open()方法和send()方法之間調用setRequestHeader()方法

在調用setRequestHeader()方法前，需要調用open()方法打開一個URL或本地文件，然後再調用send()方法發送數據，否則該方法將拋出錯誤。下面是一個示例：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.example.com', true); // 必須先調用 open()
xhr.setRequestHeader('My-Header', 'value'); // 調用 setRequestHeader()
xhr.send(); // 再調用 send()

3. 非簡單請求時會發送預檢請求

根據Ajax規範，非簡單請求會發送預檢請求，要先判斷預檢是否可以通過後才可以發送真正的請求。這種情況下，需要設置請求頭信息Access-Control-Request-Method和Access-Control-Request-Headers。代碼示例如下：

var xhr = new XMLHttpRequest();
xhr.open('PUT', 'http://www.example.com', true);
xhr.setRequestHeader('Content-Type', 'text/plain');
xhr.setRequestHeader('X-Custom-Header', 'value');
xhr.onreadystatechange = function() {
  if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
    console.log('success')
  }
};
xhr.send('data');

在上述代碼中，由於請求為PUT請求，就是非簡單請求，事先需要發送預檢請求，判斷是否可以進行真正的請求。預檢請求中會發送Access-Control-Request-Method和Access-Control-Request-Headers，代碼中設置X-Custom-Header值。

四、setRequestHeader的拓展應用

除了普通的HTTP請求中使用外，setRequestHeader方法還可以應用在其他領域。

1. CORS跨域請求頭設置

CORS(Cross-Origin Resource Sharing)是一種瀏覽器與伺服器間跨域訪問歐洲標準。當客戶端根據指定的協議、主機和埠判斷自己和服務端不在同一源中時，就需要通過CORS機制來進行跨站點訪問。setRequestHeader方法在CORS請求中需要進行拓展應用。如下是一個具體的代碼案例：

var xhr = new XMLHttpRequest();
if (typeof xhr.withCredentials === "undefined"){
    xhr = null;
}
if (xhr !== null){
    // 帶憑據(HTTP cookies 和HTTP Authentication信息 )的 XMLHttpRequest 跨站點訪問
    xhr.open('GET', 'https://example.com/', true);
    xhr.setRequestHeader('Authorization', 'Basic ' + btoa('username:password'));
    xhr.withCredentials = true;
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4){
            if (xhr.status == 200){
                // 成功處理響應
            }
            else{
                // 處理錯誤
            }
        }
    };
    xhr.send();
}

在上述代碼中，增加了withCredentials屬性的設置，表示允許帶憑據(HTTP cookies 和HTTP Authentication信息 )的XMLHttpRequest跨站點請求。打開時還增加了credentials: ‘include’。請求時添加了Authorization請求頭信息及對應的值。

2. 處理二進位流

XMLHttpRequest對象中還提供了一個send()方法，可以接收二進位數據。可以通過setRequestHeader方法定義二進位數據的MIME類型（比如image/png，application/octet-stream）。以下是一個代碼案例：

var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.overrideMimeType('text/plain; charset=x-user-defined');
xhr.onreadystatechange = function(e) {
  if (this.readyState == 4 && this.status == 200) {
    if (this.responseText) {
      var uInt8Array = new Uint8Array(this.responseText.length);
      for (var i = 0; i < this.responseText.length; i++) {
        uInt8Array[i] = this.responseText.charCodeAt(i);
      }
      var blob = new Blob([uInt8Array], { type: 'image/png' });
      updateImage(blob);
    }
  }
};
xhr.send(null);

在上述代碼中，OverrideMimeType()方法用於將responseType覆蓋為文本/ x -用戶定義的字符集，用於處理二進位數據。通過Uint8Array()方法將字元轉化為Unicode碼，並通過Blob()方法轉為圖片資源類型Blob對象。最後將Blob對象準備更新到圖像標籤或存儲到後端服務中。

結語

以上就是關於setRequestHeader方法相關知識的詳細介紹。setRequestHeader是AJAX請求過程中非常重要的一個方法，可以幫助我們設置請求頭的參數，使請求得以被伺服器處理。同時，也要在使用該方法的時候，遵循特定規則及相關約定和注意事項。希望本篇文章對大家理解setRequestHeader方法有所幫助。

原創文章，作者：PRZZM，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/334724.html