axios如何正确设置请求头？

在前后端分离的开发模式中,HTTP请求是前后端数据交互的核心环节，Axios 作为一款基于 Promise 的 HTTP 客户端，因其简洁易用、功能强大等特点，在前端开发中被广泛应用，合理设置请求头是 Axios 使用中的关键操作，它能够帮助服务器正确解析请求内容、进行身份验证、控制缓存策略等，本文将详细介绍 Axios 设置请求头的多种方法、常见场景及注意事项。

全局请求头设置

全局请求头是指对所有请求生效的默认配置,适用于项目中大部分请求都需要携带相同头信息的场景，通过 Axios 的 defaults.headers 属性可以实现全局配置，例如设置 Content-Type 为 application/json 或添加统一的认证令牌。

import axios from 'axios';
// 设置全局请求头
axios.defaults.headers.common['Authorization'] = 'Bearer your_token';
axios.defaults.headers.post['Content-Type'] = 'application/json';
// 发送请求时会自动携带上述配置
axios.get('/api/data').then(response => {
  console.log(response.data);
});

注意：全局配置会作用于所有请求，若部分请求需要覆盖全局配置，可在具体请求中通过 headers 参数重新定义。

单次请求头设置

在特定场景下,可能需要为某个单独的请求设置自定义请求头，此时可直接在请求配置中添加 headers 参数，单次请求的优先级高于全局配置，能够覆盖全局设置。

axios({
  method: 'post',
  url: '/api/submit',
  data: { key: 'value' },
  headers: {
    'Content-Type': 'multipart/form-data',
    'X-Custom-Header': 'custom_value'
  }
}).then(response => {
  console.log(response.data);
});

常见单次请求场景：

• 文件上传时设置 Content-Type: multipart/form-data
• 临时添加调试或追踪标识
• 覆盖全局认证信息以使用不同权限的接口

请求拦截器中的动态设置

对于需要根据运行时状态动态调整请求头的场景（如基于用户登录状态更新 Token），可以使用 Axios 的请求拦截器，拦截器能够在请求发送前统一处理配置，灵活性强。

axios.interceptors.request.use(config => {
  // 从本地存储获取最新 Token
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
}, error => {
  return Promise.reject(error);
});
// 发送请求时拦截器会自动处理 Token
axios.get('/api/protected');

优势：

• 避免在多个请求中重复编写 Token 逻辑
• 统一处理错误请求头（如格式校验）
• 支持异步获取动态值（如从接口获取最新配置）

不同请求方法的请求头设置

Axios 支持多种 HTTP 方法，不同方法的默认请求头可能存在差异。GET 和 DELETE 请求通常不需要 Content-Type，而 POST 和 PUT 请求需要根据数据类型设置。

示例：

// POST 请求设置 JSON 数据格式
axios.post('/api/create', { name: 'test' }, {
  headers: { 'Content-Type': 'application/json' }
});
// 文件上传设置 FormData 格式
const formData = new FormData();
formData.append('file', file);
axios.post('/api/upload', formData, {
  headers: { 'Content-Type': 'multipart/form-data' }
});

跨域请求与 CORS 头设置

在跨域场景中,服务器需通过 CORS 头部允许客户端携带自定义请求头，前端设置的请求头若属于非简单头（如 X-Custom-Header），需确保服务器返回 Access-Control-Allow-Headers 包含该字段。

服务器端配置示例（Node.js + Express）：

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Headers', 'Authorization, Content-Type');
  next();
});

注意事项：

• 浏览器会自动发送预检请求（OPTIONS）验证跨域权限
• 自定义头需在服务器明确允许,否则请求会被拦截

常见问题与最佳实践

1. 避免重复设置 Content-Type
   若全局已设置 Content-Type，单次请求中需确保数据类型与头信息一致（如 JSON 数据对应 application/json），否则可能导致服务器解析失败。

   

2. 敏感信息的安全存储
   认证 Token 等敏感信息应避免直接硬编码，建议通过环境变量或加密存储，并在拦截器中动态注入。

相关问答 FAQs

Q1: 如何在 Axios 中同时设置多个请求头？
A1: 可以通过对象语法一次性设置多个请求头，

axios.get('/api/data', {
  headers: {
    'Authorization': 'Bearer token',
    'X-Request-ID': '12345',
    'Accept-Language': 'zh-CN'
  }
});

Q2: 请求拦截器中如何修改已设置的请求头？
A2: 在请求拦截器的 config 对象中直接修改 headers 属性即可，

axios.interceptors.request.use(config => {
  config.headers['X-Modified'] = 'true'; // 添加新头
  delete config.headers['Unwanted-Header']; // 删除不需要的头
  return config;
});