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

// 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默认头

// 创建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'
  }
});

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);
});

// 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
  }
});

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

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

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

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

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