如何在Nuxt中为Axios全局添加请求头实现REST API调用

刚好之前做过类似的配置，在Nuxt里让所有Axios请求自动携带指定请求头参数，有两种常用方案，你可以根据参数是否动态来选择：

方案一：静态全局配置（参数固定不变时） #

如果你的三个请求头参数是固定值，直接在nuxt.config.js里的Axios配置项中添加即可，所有请求都会自动继承这些头信息。

修改你的nuxt.config.js：

export default {
  // 其他配置...
  axios: {
    // 先把API基础URL配置好，后续调用就不用写全地址了
    baseURL: 'http://my.api.adress:8001',
    // 全局请求头配置，所有请求都会携带这些参数
    headers: {
      common: {
        // 替换成你的三个请求头键值对
        'X-Custom-Header-1': 'your-fixed-value-1',
        'X-Custom-Header-2': 'your-fixed-value-2',
        'X-Custom-Header-3': 'your-fixed-value-3'
      }
    }
  }
}

配置完成后，你原来的asyncData里的请求可以简化成：

let { data } = await app.$axios.$get(`/competition/sport/4?_format=json&limit=20&offset=0`)

方案二：请求拦截器（参数需要动态获取时） #

如果你的请求头参数是动态的（比如从用户登录态、Vuex或本地存储中获取），用Axios的请求拦截器更灵活。

步骤1：创建Axios插件文件 #

在plugins目录下新建axios.js：

export default function ({ $axios, store }) {
  // 在发送每个请求前执行拦截逻辑
  $axios.onRequest(config => {
    // 这里可以动态获取参数，示例：
    const header1 = store.state.user.authToken // 从Vuex取
    const header2 = localStorage.getItem('userInfo') // 从本地存储取
    const header3 = 'fixed-value' // 也可以混合固定值

    // 将参数添加到请求头
    config.headers['X-Custom-Header-1'] = header1
    config.headers['X-Custom-Header-2'] = header2
    config.headers['X-Custom-Header-3'] = header3

    return config
  })
}

步骤2：在Nuxt配置中注册插件 #

修改nuxt.config.js，添加插件注册：

export default {
  // 其他配置...
  plugins: [
    '~/plugins/axios.js' // 注册刚才创建的Axios插件
  ],
  axios: {
    baseURL: 'http://my.api.adress:8001' // 依旧建议配置基础URL
  }
}

验证是否生效 #

配置完成后，打开浏览器开发者工具的「Network」标签，发起请求后查看请求的「Request Headers」，确认你的三个参数是否已经自动携带上了。

内容的提问来源于stack exchange，提问作者yoyojs