快捷導(dǎo)航

Vue使用Axios添加自定義請求頭的多種方式

更新時間：2025年05月16日 17:20:53 作者：大巨頭

Axios 是一個基于 promise 的 HTTP 庫,可以用在瀏覽器和 node.js 中,這篇文章給大家介紹了Vue使用Axios添加自定義請求頭的多種方式,并通過代碼講解的非常詳細,需要的朋友可以參考下

1. 全局設(shè)置（適用于所有請求）

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

axios.defaults.headers.common['X-Custom-Header'] = 'default-value';
axios.defaults.headers.post['Content-Type'] = 'application/json'; // 設(shè)置POST默認頭

2. 實例配置（推薦方式）

// 創(chuàng)建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. 請求攔截器設(shè)置（動態(tài)頭）

http.interceptors.request.use(config => {
  // 動態(tài)設(shè)置認證頭
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  
  // 固定業(yè)務(wù)頭
  config.headers['X-Client-Version'] = '1.0.0';
  config.headers['X-Platform'] = 'Web';
  
  return config;
}, error => {
  return Promise.reject(error);
});

4. 單個請求設(shè)置

// 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 預(yù)檢請求

// 確保服務(wù)器允許自定義頭
// 示例：Nginx配置
add_header 'Access-Control-Allow-Headers' 'X-Custom-Header, Authorization';

問題2：頭信息被覆蓋

// 在攔截器中合并頭信息
config.headers = {
  ...config.headers,
  'X-New-Header': 'value',
  'Content-Type': 'application/json' // 明確設(shè)置內(nèi)容類型
};

問題3：開發(fā)環(huán)境代理配置

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