前端调用刷新接口时无法获取Cookie导致401未授权问题

后端登录接口可正常生成并将refreshToken存入httpOnly Cookie，但前端通过自定义hook调用刷新接口时返回401，后端打印req.cookies为空对象，核心问题集中在Cookie跨域传输限制和CORS配置细节上，以下是针对性修复步骤：

1. 修复Cookie的SameSite与Secure配置矛盾 #

当SameSite=None时，现代浏览器要求必须配合Secure=true（仅HTTPS环境生效），否则会拒绝存储Cookie。开发环境（HTTP）可调整为SameSite=Lax，生产环境（HTTPS）保持SameSite=None+Secure=true：

修改Login接口的Cookie设置：

res.cookie('jwt', refreshToken, {
  httpOnly: true,
  secure: process.env.NODE_ENV === 'production', // 生产环境启用Secure
  sameSite: process.env.NODE_ENV === 'production' ? 'None' : 'Lax', // 根据环境适配SameSite
  maxAge: 7 * 24 * 60 * 60 * 1000,
});

2. 确保后端启用Cookie解析中间件 #

Express默认不会自动解析Cookie，必须引入cookie-parser并挂载，否则req.cookies始终为空：

安装依赖：

npm install cookie-parser

在后端入口文件（如app.js）中添加：

import cookieParser from 'cookie-parser';
app.use(cookieParser());

3. 验证CORS Origin配置准确性 #

检查allowedOrigins数组是否包含前端的完整域名（如开发环境的http://localhost:3000），注意不要遗漏端口号，且域名末尾不要带斜杠。开发环境可临时放宽规则适配本地调试：

const corsOption = {
  origin: (origin, callback) => {
    if (allowedOrigins.includes(origin) || !origin || origin.startsWith('http://localhost:')) {
      callback(null, true);
    } else {
      callback(new Error('Not allowed by CORS'));
    }
  },
  credentials: true,
  optionsSuccessStatus: 200,
};

4. 确认Axios跨域凭证配置生效 #

虽然自定义Hook中设置了withCredentials: true，建议在全局Axios实例中统一配置，避免单个请求遗漏：

修改../api/axios文件：

import axios from 'axios';

const instance = axios.create({
  baseURL: '你的后端API地址',
  withCredentials: true, // 全局开启跨域携带凭证
});

export default instance;

验证步骤 #

1. 登录后打开浏览器开发者工具，在Application > Cookies中确认jwt Cookie已存储，且SameSite/Secure属性符合环境配置。
2. 调用刷新接口时，查看Network面板中请求头的Cookie字段是否包含jwt。
3. 后端再次打印req.cookies，确认能获取到jwt值。

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