javascript 設定http請求頭

JavaScript是一門廣泛應用於前端開發的語言，可透過設定HTTP請求頭，來實現更有效率的網路通訊。 HTTP請求頭是HTTP協定中的一部分，位於HTTP請求中的首部，用於傳遞請求訊息，如User-Agent、Accept等等。在JavaScript中，我們可以透過設定HTTP請求頭來優化網路請求，例如增加安全性、快取控制、跨域等等。

本文將介紹JavaScript中如何設定HTTP請求頭的方法。

1. 設定Ajax請求頭

在JavaScript中，我們通常使用Ajax來進行網路請求。如下是一個簡單的Ajax請求範例：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) { // 请求完成，接收响应数据
    console.log(xhr.status) // HTTP状态码
    console.log(xhr.statusText) // HTTP状态文本
    console.log(xhr.responseText) // 响应数据
  }
}
xhr.open('GET', '/api/data', true); // 发起GET请求，true表示是异步请求
xhr.send();

在上面的程式碼中，我們透過XMLHttpRequest物件來發起一個GET請求，並在其onreadystatechange方法中處理回應資料。這個請求雖然可以成功發起並獲得回應數據，但並沒有設定HTTP請求頭。在Ajax中，我們可以透過設定XMLHttpRequest物件的setRequestHeader方法來設定HTTP請求頭，例如：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) { // 请求完成，接收响应数据
    console.log(xhr.status) // HTTP状态码
    console.log(xhr.statusText) // HTTP状态文本
    console.log(xhr.responseText) // 响应数据
  }
}
xhr.open('GET', '/api/data', true); // 发起GET请求，true表示是异步请求
xhr.setRequestHeader('Authorization', 'Bearer my_token'); // 设置Authorization请求头
xhr.send();

在上面的程式碼中，我們增加了一行設定Authorization請求頭的程式碼，其值為Bearer my_token ，即使用Bearer Token認證方式來存取伺服器API。透過這種方式，我們就可以在Ajax請求中設定HTTP請求頭，以便於存取API介面、傳遞認證資訊等等。

2. 設定XHR請求頭

在JavaScript中，XMLHttpRequest物件是用來與伺服器互動的最常用工具，它可以透過設定HTTP頭資訊來實現更有效率的網路通訊。如下是XHR請求頭設定的範例：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) { // 请求完成，接收响应数据
    console.log(xhr.status) // HTTP状态码
    console.log(xhr.statusText) // HTTP状态文本
    console.log(xhr.responseText) // 响应数据
  }
}
xhr.open('POST', '/api/data', true); // 发起POST请求，true表示是异步请求
xhr.setRequestHeader('Content-Type', 'application/json'); // 设置请求头Content-Type为JSON
xhr.send(JSON.stringify({name: 'Tom'})); // 发送JSON数据

在上面的程式碼中，我們透過XMLHttpRequest物件來發起一個POST請求，並設定了Content-Type請求頭為application/json，以便於向伺服器API傳遞JSON格式的資料。透過這種方式，我們就可以在XHR請求中設定HTTP請求頭，進而實現更有效率的網路通訊。

3. 設定Fetch請求頭

在ES6中，Fetch是原生支援的更強大的網路請求API，它返回的是一個Promise對象，支援鍊式調用，並且更簡潔。如下是一個簡單的Fetch請求範例：

fetch('/api/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error))

在上面的程式碼中，我們透過fetch函數來發起一個GET請求，並對傳回的回應資料進行處理。雖然這個請求成功發起並獲得回應數據，但並沒有設定HTTP請求頭。在Fetch中，我們可以透過設定請求的Header物件來設定HTTP請求頭，例如：

fetch('/api/data', {
  headers: {
    'Authorization': 'Bearer my_token',
    'Content-Type': 'application/json'
  }
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error))

在上面的程式碼中，我們增加了一行設定Header請求頭物件的程式碼，其包含了Authorization和Content-Type兩個請求頭，以便於存取API介面、傳遞認證資訊、指定資料類型等等。透過這種方式，我們就可以在Fetch請求中設定HTTP請求頭，以實現更有效率的網路請求。

總結：

在JavaScript中設定HTTP請求頭，需要依照不同的網路請求工具，分別使用不同的設定方法。在Ajax中，我們透過XMLHttpRequest物件的setRequestHeader方法來設定HTTP請求頭；在XHR中，我們也透過它的setRequestHeader方法來設定HTTP請求頭；在Fetch中，我們需要設定Header物件來設定HTTP請求頭。無論使用哪種設定方法，都需要根據具體情況來選用合適的HTTP請求頭，以便於實現更有效率的網路通訊。

以上是javascript 設定http請求頭的詳細內容。更多資訊請關注PHP中文網其他相關文章！