Ajax 设置请求头详解

一、Ajax 设置请求头解决跨域

在跨域请求时，请求头设置是一个必要的步骤。一般情况下，Ajax 请求不带请求头信息。如果我们需要传递一些头信息，就需要设置请求头。Ajax 设置请求头一般用于解决跨域请求。

跨域请求通常经过两次请求，第一次发送一个 Option 请求，获取服务端允许的请求方法和头信息等，之后再发送真正的请求。为了解决跨域请求，服务器需要允许请求头信息。

代码示例：

const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
}
xhr.open("GET", "http://example.com/getData", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.setRequestHeader("Authorization", "Bearer xxxxxxx");
xhr.send();

二、Ajax 设置请求头会被转义不

当我们设置请求头信息时，浏览器通常会自动进行编码，跟数据传输时一样。因此，即使我们设置了一些特殊字符，请求头也不会被转义。

代码示例：

const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
}
xhr.open("GET", "http://example.com/getData", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.setRequestHeader("Custom-Header", "Special & \"Quotes\"");
xhr.send();

三、Ajax 设置请求头编码

请求头设置时，需要注意编码问题。默认情况下，浏览器会对请求头进行URL编码。我们可以使用encodeURIComponent()方法对请求头进行编码，以避免浏览器编码的影响。

代码示例：

const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
}
xhr.open("GET", "http://example.com/getData", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.setRequestHeader("Custom-Header", encodeURIComponent("Special & \"Quotes\""));
xhr.send();

四、Ajax 设置头信息

在请求头中，我们可以设置很多信息，如User-Agent头、Host头、Referer头等。这些头信息可以方便地帮助服务器了解请求者的客户端情况，或者进行一些安全检验。

代码示例：

const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
}
xhr.open("GET", "http://example.com/getData", true);
xhr.setRequestHeader("User-Agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:60.0) Gecko/20100101 Firefox/60.0");
xhr.setRequestHeader("Referer", "http://example.com");
xhr.send();

五、Ajax 添加请求头参数

在发送请求时，我们有时需要添加一些额外的参数，以获取更多的信息。请求头中的参数通常以key-value的形式出现。

代码示例：

const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
}
xhr.open("GET", "http://example.com/getData", true);
xhr.setRequestHeader("Content-Type", "application/json");
const params = {
  key1: "value1",
  key2: "value2",
}
xhr.setRequestHeader("Params", JSON.stringify(params));
xhr.send();

六、Ajax 加请求头

当我们发送多次Ajax请求时，可以使用封装函数的方式来复用代码。这样可以避免重复编写请求头信息。我们可以使用对象的方式来封装请求头信息，并将其作为参数传递给Ajax请求函数。

代码示例：

function ajax(options) {
  const xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log(xhr.responseText);
    }
  }
  xhr.open(options.method, options.url, true);
  if (options.headers) {
    for (let key in options.headers) {
      xhr.setRequestHeader(key, options.headers[key]);
    }
  }
  xhr.send(options.data);
}

const options = {
  method: "GET",
  url: "http://example.com/getData",
  headers: {
    "Content-Type": "application/json",
    "Authorization": "Bearer xxxxxxxx"
  }
}

ajax(options);

七、Ajax get 请求头

Ajax 可以通过get方式获取服务器数据，请求头中不加请求体参数信息；如果需要添加一些特殊的信息，同样可以通过设置请求头信息来实现。

代码示例：

const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
}
const params = {
  key1: "value1"
}
xhr.open("GET", http://example.com/getData?key1=value1, true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.setRequestHeader("Authorization", "Bearer xxxxxxxx")
xhr.send();

八、Ajax 的请求里面的头信息

在Ajax 请求中，我们可以获取请求时携带的头信息。我们可以使用getAllResponseHeaders()方法来获取所有头信息，或者使用getResponseHeader()方法获取指定的头信息。

代码示例：

const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const headers = xhr.getAllResponseHeaders();
    const contentType = xhr.getResponseHeader("Content-Type");
    console.log(headers);
    console.log(contentType);
  }
}
const params = {
  key1: "value1"
}
xhr.open("GET", http://example.com/getData?key1=value1, true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.setRequestHeader("Authorization", "Bearer xxxxxxxx")
xhr.send();