如何在Nuxt.js的nuxt.config.js中获取当前语言并添加到Axios请求头？

因为nuxt.config.js里的Axios配置是静态的，无法直接动态获取当前用户选择的语言，所以需要通过Axios请求拦截器结合nuxt-i18n的全局语言状态来实现需求。

步骤1：创建Axios请求拦截器插件 #

在项目根目录的plugins文件夹下新建axios.js文件，添加动态设置请求头的逻辑：

export default function ({ $axios, app }) {
  // 每次发送请求前执行拦截逻辑
  $axios.onRequest(config => {
    // 获取当前用户选中的语言代码（如'en'、'de'、'ru'）
    const currentLocale = app.i18n.locale
    // 匹配locales中对应的标准语言标签（如'en-US'）
    const matchedLocale = app.i18n.locales.find(item => item.code === currentLocale)
    const languageTag = matchedLocale ? matchedLocale.ico : currentLocale
    // 设置Accept-Language请求头
    config.headers.common['Accept-Language'] = languageTag
  })
}

步骤2：在nuxt.config.js中注册插件 #

找到plugins配置项，添加刚才创建的插件：

plugins: [
  '~/plugins/axios.js'
],

步骤3：移除Axios的静态语言头配置 #

删掉nuxt.config.js中Axios部分的固定Accept-Language设置，避免和动态设置冲突：

axios: {
  baseURL: 'http://127.0.0.1:8000',
  headers: {
    common: {
      // 移除原有的'Accept-Language': 'en'
    }
  }
},

说明 #

nuxt-i18n会将当前用户的语言状态实时维护在app.i18n.locale中，无论是用户手动切换语言，还是通过浏览器自动检测的语言，这个值都会同步更新。请求拦截器会在每次发起Axios请求前读取最新的语言状态，确保后端能接收到正确的语言标识。

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