React应用Axios登录Cookie不生效，Insomnia中正常如何解决

跨域场景下，浏览器出于同源安全策略，默认不会在AJAX请求中自动携带、也不会存储服务端通过Set-Cookie响应头返回的Cookie。接口调试工具（如Insomnia、Postman）不受浏览器同源策略限制，会自动维护Cookie存储与携带逻辑，因此会出现工具请求正常、前端页面请求鉴权失败的情况。
现有axios代码未开启跨域凭证携带相关配置，是Cookie无法正常写入、后续受保护路由请求返回You are unauthenticated报错的核心原因。

1. 开启axios的withCredentials配置 #

该配置开启后，跨域请求会自动携带对应域名下的Cookie，同时会正常接收、存储服务端返回的Cookie，支持两种配置方式：

• 单请求配置（仅对当前登录接口生效）
  修改登录请求代码，在axios.post的第三个参数传入配置项即可，修正后的完整代码如下：

const submit = async (e) => {
  e.preventDefault();
  const data = { username, password };
  try {
    const res = await axios.post(path, data, {
      withCredentials: true
    });
    console.log(res);
  } catch (err) {
    setLoading(false);
    setError(err.message);
  }
}

原代码混用async/await与.then属于冗余写法，上述代码已做精简，逻辑保持一致。

• 全局配置（对所有axios请求生效）
  如果项目中多数接口都需要携带鉴权Cookie，可以做全局配置，无需每个请求单独添加参数：

// 全局默认配置
axios.defaults.withCredentials = true;

// 如果使用自定义封装的axios实例，在实例配置中添加即可
const service = axios.create({
  baseURL: '后端接口基础路径',
  withCredentials: true
})

2. 同步调整后端CORS配置 #

前端开启withCredentials后，后端跨域配置必须满足以下要求，否则浏览器会直接拦截跨域响应：

• Access-Control-Allow-Origin 不能设置为通配符*，必须配置为前端服务的精确源地址，比如本地开发时为http://localhost:5173（端口以本地前端服务实际运行端口为准）
• Access-Control-Allow-Credentials 响应头必须设置为true
• 服务端Set-Cookie头属性需要适配部署场景：
  • 本地HTTP开发环境：不要开启Secure属性，SameSite建议设置为Lax，不要设为Strict
  • 生产HTTPS环境：开启Secure属性，SameSite根据是否跨站部署设置为Lax或None（设置为None时必须同时开启Secure）

3. 保持后续接口配置一致 #

所有访问需要登录鉴权的受保护接口时，都要保证withCredentials处于开启状态，否则即使登录阶段已经成功写入Cookie，后续请求不携带Cookie依然会被后端判定为未登录。

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