在 Vue 中使用 Axios 添加自定义请求头有多种方式

在 Vue 中使用 Axios 添加自定义请求头有多种方式，以下是详细实现方案：

1. 全局设置（适用于所有请求）

// main.js 或 axios 配置文件中
import axios from 'axios';

axios.defaults.headers.common['X-Custom-Header'] = 'default-value';
axios.defaults.headers.post['Content-Type'] = 'application/json'; // 设置POST默认头

2. 实例配置（推荐方式）

// 创建axios实例（api.js）
const http = axios.create({
  baseURL: process.env.VUE_APP_API_BASE_URL,
  headers: {
    'X-Requested-With': 'XMLHttpRequest',
    'X-Custom-Header': 'instance-value'
  }
});

3. 请求拦截器设置（动态头）

http.interceptors.request.use(config => {
  // 动态设置认证头
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  
  // 固定业务头
  config.headers['X-Client-Version'] = '1.0.0';
  config.headers['X-Platform'] = 'Web';
  
  return config;
}, error => {
  return Promise.reject(error);
});

4. 单个请求设置

// GET请求
this.$http.get('/api/data', {
  headers: {
    'X-Special-Header': 'for-this-request-only'
  }
});

// POST请求
this.$http.post('/api/save', data, {
  headers: {
    'X-Data-Type': 'json',
    'X-Request-ID': uuidv4() // 生成唯一ID
  }
});

5. 处理常见问题

问题1：CORS 预检请求

// 确保服务器允许自定义头
// 示例：Nginx配置
add_header 'Access-Control-Allow-Headers' 'X-Custom-Header, Authorization';

问题2：头信息被覆盖

// 在拦截器中合并头信息
config.headers = {
  ...config.headers,
  'X-New-Header': 'value',
  'Content-Type': 'application/json' // 明确设置内容类型
};

问题3：开发环境代理配置

// vue.config.js
devServer: {
  proxy: {
    '/api': {
      target: 'http://backend:8080',
      headers: {
        'X-Proxy-Header': 'vue-dev-server'
      }
    }
  }
}

6. TypeScript 类型支持（如使用TS）

declare module 'axios' {
  interface AxiosRequestConfig {
    customMetadata?: {
      startTime?: number;
      retryCount?: number;
    };
  }
}

// 使用扩展配置
http.get('/api', {
  customMetadata: {
    startTime: Date.now()
  },
  headers: {
    'X-Performance-Marker': 'start'
  }
});

最佳实践建议：

1. 敏感头（如Authorization）建议只在拦截器中设置
2. 业务相关头（如X-User-Type）建议在实例级别设置
3. 临时特殊头（如X-Debug-Mode）在单个请求设置
4. 所有自定义头应以X-前缀开头（传统约定）
5. 生产环境应移除不必要的头信息

通过以上方法，你可以灵活地在Vue项目中管理各种自定义请求头，同时保持良好的代码组织和可维护性。