React无法从Express服务器设置httpOnly Cookie问题排查

环境信息 #

• Vite + React: http://localhost:5173
• Express: http://localhost:3000

相关代码 #

1. Express登录路由代码

const mycookie = cookie.serialize("jwt", refreshToken, {
    httpOnly: true, // 设置HTTP-only标记
    secure: true, // 设置secure标记
    sameSite: "none", 
    path: "/", // Cookie路径设为根目录
    maxAge: 3600, // Cookie有效期1小时
  });

res.setHeader("Set-Cookie", mycookie);

res.json({
    accessToken,
    refreshToken,
});

2. CORS配置

const allowedOrigins = require("./allowedOrigins");

const corsOptions = {
  crendials: true,
  origin: function (origin, callback) {
    console.log(allowedOrigins.indexOf(origin));
    if (allowedOrigins.indexOf(origin) !== -1) {
      callback(null, true);
    } else {
      callback(new Error("Not allowed by CORS"));
    }
  },
};

3. React前端提交函数

const handleSubmit = () => {
    console.log("Login");
    // axios.defaults.withCredentials = true;

    axios.post("http://localhost:3000/api/v1/auth/login", { email, password });
};

问题现象 #

• 登录请求的响应头包含Set-Cookie字段，但浏览器开发者工具的Application标签中无法找到该Cookie
• 请求会触发OPTIONS预检请求，疑似预检完成后Cookie被清除
• 禁用浏览器CORS限制后，Cookie能正常设置且不会触发预检请求

已尝试方案 #

• 参考过Stack Overflow、Reddit上的相关解决方案
• 尝试设置credentials: true，但问题未解决

问题修复步骤 #

1. 修正CORS配置的拼写错误

Express的CORS配置中crendials是拼写错误，正确应为credentials，该错误会导致跨域携带凭证的配置失效：

const allowedOrigins = require("./allowedOrigins");

const corsOptions = {
  credentials: true, // 修正拼写错误
  origin: function (origin, callback) {
    console.log(allowedOrigins.indexOf(origin));
    if (allowedOrigins.indexOf(origin) !== -1) {
      callback(null, true);
    } else {
      callback(new Error("Not allowed by CORS"));
    }
  },
};

2. 前端Axios请求开启withCredentials

跨域请求携带Cookie必须显式开启withCredentials，可选择单次请求配置或全局配置：

// 单次请求配置
const handleSubmit = () => {
    console.log("Login");
    axios.post("http://localhost:3000/api/v1/auth/login", { email, password }, {
        withCredentials: true // 必须添加此配置
    });
};

// 全局配置（推荐，在项目入口文件中设置）
axios.defaults.withCredentials = true;

3. 调整Cookie的secure属性（适配本地开发）

本地开发使用HTTP协议，而secure: true要求Cookie仅在HTTPS环境下传输，因此本地开发时需将其设为false，生产环境再恢复为true：

const mycookie = cookie.serialize("jwt", refreshToken, {
    httpOnly: true,
    secure: process.env.NODE_ENV === 'production', // 开发环境为false，生产环境为true
    sameSite: "none", 
    path: "/",
    maxAge: 3600,
  });

4. 确保CORS中间件优先挂载

Express的CORS中间件需要在所有路由之前挂载，以保证OPTIONS预检请求能被正确处理：

// 先挂载CORS中间件
app.use(cors(corsOptions));
// 再挂载业务路由
app.use("/api/v1/auth", authRouter);

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