js怎么设置header

在JavaScript中，设置HTTP请求头（header）通常是通过使用XMLHttpRequest对象或现代的fetch API来实现的。以下是两种方法的详细说明和示例代码。

使用 XMLHttpRequest 设置 Header

XMLHttpRequest是一个内置的浏览器对象，用于与服务器进行交互。

// 创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();

// 配置请求类型、URL以及是否异步处理请求
xhr.open('GET', 'https://api.example.com/data', true);

// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('Authorization', 'Bearer your_token');

// 设置响应处理函数
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.responseText);
  } else {
    console.error('请求失败: ' + xhr.status);
  }
};

// 发送请求
xhr.send();

使用 Fetch API 设置 Header

fetch API提供了一个JavaScript Promise-based HTTP接口，用于访问和操纵HTTP管道的部分。

// 定义请求的URL
const url = 'https://api.example.com/data';

// 创建一个Headers对象并设置请求头
const headers = new Headers({
  'Content-Type': 'application/json',
  'Authorization': 'Bearer your_token'
});

// 创建一个fetch请求
fetch(url, {
  method: 'GET',
  headers: headers
})
.then(response => {
  if (!response.ok) {
    throw new Error('网络响应错误');
  }
  return response.json();
})
.then(data => console.log(data))
.catch(error => console.error('请求失败:', error));

注意事项

CORS（跨源资源共享）: 如果请求的资源位于不同的域上，服务器必须支持CORS，并且允许客户端设置的头部信息。
预检请求（Preflight Request）: 当发送复杂请求（如带有自定义头部的POST请求）时，浏览器会自动发送一个OPTIONS请求进行预检，以确保服务器接受实际的请求。
同源策略: 浏览器的安全策略限制了一个源的文档或脚本如何与另一个源的资源进行交互。