NextJS中Axios withCredentials失效：自定义Cookie无法传递求助

问题根源分析 #

核心问题是自定义Cookie未被浏览器保存，导致后续Axios请求无法传递该Cookie。结合你的代码场景，主要是Cookie属性配置、Axios实例使用这两个环节出了问题：

修复步骤 #

1. 本地开发时关闭Cookie的secure属性

你给Cookie设置了secure: true，但本地开发用的是HTTP协议（http://localhost:3000），而secure属性要求Cookie只能在HTTPS环境下被浏览器保存和传输，这直接导致浏览器忽略了Set-Cookie指令。

修改后端Cookie生成代码，根据环境动态配置：

res.cookie(
  'site-auth.session-token',
  {
    accessToken,
    refreshToken,
    tokenId,
  },
  {
    httpOnly: true,
    sameSite: process.env.NODE_ENV === 'production' ? 'none' : 'lax',
    domain: process.env.NODE_ENV === 'production' ? '你的生产域名' : '', // 本地开发留空
    secure: process.env.NODE_ENV === 'production', // 仅生产环境开启secure
    expires: this.getRefreshExpiry(),
  },
);

2. 调整Domain配置

本地开发时给Cookie设置domain: 'localhost'可能触发浏览器的Cookie隔离机制，部分浏览器（如Chrome）对localhost的Cookie处理特殊，留空domain让浏览器自动处理反而更可靠。

3. 确保登录请求使用正确的Axios实例

你的登录逻辑里用的是axios.post默认实例，但你自定义的Axios实例才配置了withCredentials: true。如果登录请求用的是未开启凭证的默认实例，浏览器会因跨域请求无凭证声明，拒绝保存Set-Cookie。

修改登录逻辑，导入你自己创建的Axios实例：

// 导入自定义的Axios实例（比如叫apiClient）
import apiClient from '../path/to/your/axios-instance';

async authorize(credentials, req) {
  const res = await apiClient.post( // 改用自定义实例发起请求
    "auth/signin",
    {
      email: credentials?.email,
      password: credentials?.password,
    }
  );
  console.log(res.headers);
  const user = await res.data;
  return user ?? null;
},

4. 验证Cookie状态

修改完成后重新登录，打开浏览器控制台的Application标签，查看Cookies下的http://localhost:8000（后端地址），确认site-auth.session-token是否存在。若存在，再调用/profile接口即可正常传递Cookie。

额外说明 #

Postman测试正常是因为它不严格遵循浏览器的Cookie安全规则，不管secure和SameSite属性都会保存Cookie，但浏览器会严格执行这些规则。

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