React项目中axios创建的公共实例如何设置动态可更新请求头

不需要使用React Context或Hook，以下两种方案都支持在普通JS文件（如index.js）和React组件中通用，修改后所有引用该api实例的请求都会同步更新请求头。

方案1：直接修改实例默认配置（轻量首选） #

axios实例的defaults配置是可直接修改的，所有引用同一实例的地方都会共享修改后的配置。
你无需修改原有api.js的初始化代码，只需要在切换locale的逻辑中加入以下代码即可：

import api from './api';

// 切换locale的逻辑，可在任意JS环境执行
const changeLocale = (newLocale) => {
  // 同步修改所有请求方法的locale配置
  api.defaults.headers.post.locale = newLocale;
  api.defaults.headers.get.locale = newLocale;
  // 如有put/delete等其他请求方法，按需补充即可
}

方案优点 #

• 无需修改原有api初始化逻辑
• 调用简单，没有额外性能开销

方案2：请求拦截器动态注入（扩展性更强） #

如果你的locale存储在localStorage、全局状态等位置，更适合用拦截器在每次请求前自动读取最新值注入，无需主动调用修改方法。
修改后的api.js代码如下：

import axios from 'axios';

const api = axios.create({
    baseURL: process.env.REACT_APP_API_URL,
    headers: {
      post: {
        "Content-Type": "application/json;charset=utf-8",
        "Access-Control-Allow-Origin": "*",
        // 原有的locale配置可以去掉，由拦截器统一注入
      },
    },
});

// 添加请求拦截器
api.interceptors.request.use((config) => {
  // 可从任意存储位置读取最新locale，示例用localStorage
  const currentLocale = localStorage.getItem('app_locale') || 'en';
  // 给所有请求方法统一添加locale头
  config.headers.locale = currentLocale;
  return config;
}, (error) => Promise.reject(error));

export default api;

需要切换locale时，只需要更新对应存储的值即可，比如：

// 任意环境都可执行
localStorage.setItem('app_locale', 'fr');

方案优点 #

• 支持多动态请求头扩展，后续新增动态配置无需调整调用逻辑
• 统一管理所有请求头注入逻辑，维护成本更低

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