javascript set http request header

JavaScript is a language widely used in front-end development. It can achieve more efficient network communication by setting HTTP request headers. The HTTP request header is a part of the HTTP protocol. It is located at the head of the HTTP request and is used to transmit request information, such as User-Agent, Accept, etc. In JavaScript, we can optimize network requests by setting HTTP request headers, such as increasing security, cache control, cross-domain, etc.

This article will introduce how to set HTTP request headers in JavaScript.

1. Set Ajax request header

In JavaScript, we usually use Ajax to make network requests. The following is a simple Ajax request example:

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();

In the above code, we initiate a GET request through the XMLHttpRequest object and process the response data in its onreadystatechange method. Although this request can be initiated successfully and the response data is obtained, the HTTP request header is not set. In Ajax, we can set the HTTP request header by setting the setRequestHeader method of the XMLHttpRequest object, for example:

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();

In the above code, we added a line of code to set the Authorization request header, whose value is Bearer my_token , that is, using Bearer Token authentication method to access the server API. In this way, we can set HTTP request headers in Ajax requests to facilitate access to API interfaces, transfer authentication information, etc.

2. Set XHR request header

In JavaScript, the XMLHttpRequest object is the most commonly used tool for interacting with the server. It can be more efficient by setting HTTP header information. network communication. The following is an example of XHR request header setting:

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数据

In the above code, we initiate a POST request through the XMLHttpRequest object and set the Content-Type request header to application/json to facilitate the request to the server. The API delivers data in JSON format. In this way, we can set HTTP request headers in XHR requests to achieve more efficient network communication.

3. Set Fetch request header

In ES6, Fetch is a more powerful network request API natively supported. It returns a Promise object and supports chain calls. , and more concisely. The following is a simple Fetch request example:

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

In the above code, we initiate a GET request through the fetch function and process the returned response data. Although this request was successfully initiated and the response data was obtained, the HTTP request header was not set. In Fetch, we can set the HTTP request header by setting the requested Header object, for example:

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))

In the above code, we added a line of code to set the Header request header object, which includes Authorization and Content-Type has two request headers to facilitate accessing the API interface, passing authentication information, specifying data types, etc. In this way, we can set HTTP request headers in the Fetch request to achieve more efficient network requests.

Summary:

To set HTTP request headers in JavaScript, you need to use different setting methods according to different network request tools. In Ajax, we set the HTTP request header through the setRequestHeader method of the XMLHttpRequest object; in XHR, we also set the HTTP request header through its setRequestHeader method; in Fetch, we need to set the Header object to set the HTTP request header. No matter which setting method is used, appropriate HTTP request headers need to be selected according to the specific situation in order to achieve more efficient network communication.

The above is the detailed content of javascript set http request header. For more information, please follow other related articles on the PHP Chinese website!