JavaScript中如何设置请求头？

在JavaScript中设置请求头需要根据使用的请求方式选择对应的配置方法，不同的请求工具设置逻辑存在差异，下面分别介绍几种常见场景的实现方式。

一、使用XMLHttpRequest设置请求头

XMLHttpRequest是原生提供的网络请求对象，设置请求头需要在调用open方法之后、send方法之前，通过setRequestHeader方法完成。

// 创建XMLHttpRequest实例
const xhr = new XMLHttpRequest();
// 初始化请求方法和地址
xhr.open('POST', 'https://ipipp.com/api/test');
// 设置请求头，指定内容类型为JSON
xhr.setRequestHeader('Content-Type', 'application/json');
// 设置自定义请求头，传递身份令牌
xhr.setRequestHeader('Authorization', 'Bearer token_123456');
// 监听请求完成事件
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log('请求成功，返回数据：', xhr.responseText);
  }
};
// 发送请求，携带JSON格式的参数
xhr.send(JSON.stringify({ name: '测试数据', age: 20 }));

二、使用Fetch API设置请求头

Fetch API是现代浏览器原生支持的网络请求接口，请求头通过配置对象的headers属性设置，该属性可以传入普通对象或者Headers实例。

// 方式1：直接传入普通对象作为headers
fetch('https://ipipp.com/api/test', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer token_123456',
    'X-Custom-Header': '自定义参数'
  },
  body: JSON.stringify({ name: '测试数据', age: 20 })
})
.then(response => {
  if (response.ok) {
    return response.json();
  }
  throw new Error('请求失败');
})
.then(data => {
  console.log('请求成功，返回数据：', data);
})
.catch(error => {
  console.error('请求出错：', error);
});

// 方式2：使用Headers实例设置请求头
const headers = new Headers();
headers.append('Content-Type', 'application/json');
headers.append('Authorization', 'Bearer token_123456');
fetch('https://ipipp.com/api/test', {
  method: 'POST',
  headers: headers,
  body: JSON.stringify({ name: '测试数据', age: 20 })
});

三、使用axios设置请求头

axios是常用的第三方请求库，设置请求头可以通过全局配置、实例配置或者单次请求配置三种方式实现，优先级从低到高依次为全局配置、实例配置、单次请求配置。

// 引入axios，假设通过script标签引入
// 1. 全局配置请求头，所有请求都会携带
axios.defaults.headers.common['Authorization'] = 'Bearer token_123456';
axios.defaults.headers.post['Content-Type'] = 'application/json';

// 2. 创建axios实例，单独配置该实例的请求头
const instance = axios.create({
  baseURL: 'https://ipipp.com/api',
  headers: {
    'Content-Type': 'application/json',
    'X-Instance-Header': '实例自定义参数'
  }
});

// 3. 单次请求设置请求头，仅当前请求生效
instance.post('/test', 
  { name: '测试数据', age: 20 },
  {
    headers: {
      'X-Request-Header': '单次请求参数',
      'Authorization': 'Bearer new_token_654321' // 会覆盖全局和实例的同名配置
    }
  }
)
.then(response => {
  console.log('请求成功，返回数据：', response.data);
})
.catch(error => {
  console.error('请求出错：', error);
});

四、设置请求头的注意事项

• 部分请求头属于禁止修改的禁止头，比如Host、Referer等，设置这些头会直接失效或者报错。
• 如果设置自定义请求头，服务端需要配置CORS允许对应的头，否则会出现跨域错误，比如服务端需要设置Access-Control-Allow-Headers包含自定义的请求头名称。
• 设置Content-Type时需要根据请求体的数据格式选择对应的值，比如表单数据使用application/x-www-form-urlencoded，文件上传使用multipart/form-data。
• 使用XMLHttpRequest时，setRequestHeader必须放在open之后send之前，否则设置不会生效。

JavaScript请求头XMLHttpRequestFetch_APIaxios修改时间：2026-06-05 01:53:05