登录后Cookie中已设置token，Axios需刷新页面才能获取的问题

问题根源在于你的Axios实例是在模块加载时就创建完成的，此时获取的token是当时Cookie里的值。登录后Cookie更新，但已创建的Axios实例不会自动同步新的token，必须刷新页面重新加载模块才能拿到新值。

下面是两种可行的解决方案：

方案一：使用请求拦截器动态获取token #

每次发起请求前实时从Cookie读取最新token，确保请求头始终携带有效token：

import axios from "axios";
import Cookies from "js-cookie";

const api = axios.create({
  baseURL: process.env.REACT_APP_API_URL,
  timeout: 10000,
  headers: {
    "Content-Type": "application/json",
    // 移除提前设置token的逻辑
  },
});

// 请求拦截器：每次请求前注入最新token
api.interceptors.request.use(
  (config) => {
    const token = Cookies.get("token");
    if (token) {
      config.headers["x-access-token"] = token;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

export default api;

方案二：登录成功后手动更新Axios实例headers #

如果不想用拦截器，可在登录成功设置Cookie后，直接修改Axios实例的默认headers：

// 登录成功后的逻辑
Cookies.set("token", 新获取的token值);
// 导入你的Axios实例并更新headers
import api from './path/to/your/api-file';
api.defaults.headers["x-access-token"] = 新获取的token值;

额外注意 #

• 原代码中的Access-Control-Allow-Origin属于后端响应头，前端请求中添加该字段无效，建议删除。
• 确保登录时设置Cookie的路径、域名与Axios请求的目标地址一致，避免出现Cookie跨域无法读取的情况。

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