React+NodeJS httpOnly Cookie问题：局域网IP下请求未携带Cookie

问题描述 #

React前端搭配NodeJS后端项目，通过httpOnly Cookie实现认证授权。静态站点部署在NodeJS后端后，localhost访问完全正常，但使用局域网IP访问时，浏览器虽已创建Cookie，却未在请求中发送至服务器。

核心原因 #

1. secure: true 属性限制：secure设为true时，Cookie仅会在HTTPS协议下被浏览器发送。局域网IP访问用的是HTTP协议，浏览器因此不会携带该Cookie。
2. CORS配置重复：自定义中间件和cors中间件重复设置跨域凭证相关头，可能导致规则冲突。

修复步骤 #

1. 动态设置Cookie的secure属性 #

根据运行环境（开发/生产）决定是否开启secure：开发环境（HTTP）设为false，生产环境（HTTPS）设为true，兼顾安全性和开发便利性。

2. 简化CORS配置 #

移除自定义的跨域头设置，直接通过cors中间件统一处理，避免重复配置引发的问题。

3. 前端请求配置确认 #

确保前端API_URL指向局域网IP，且请求时withCredentials参数保持true。

修改后代码示例 #

后端代码调整 #

// 根据环境动态配置Cookie属性
const isProduction = process.env.NODE_ENV === 'production';
res.cookie("myAppjwt", token, {
  httpOnly: true,
  sameSite: isProduction ? "None" : "Lax", // 开发环境用Lax更适配HTTP场景
  secure: isProduction, // 仅生产环境开启secure
  maxAge: 24 * 60 * 60 * 1000,
});

// 简化CORS配置
const app = express();
const allowedOrigins = [
  "http://127.0.0.1:8003",
  "http://localhost:8003",
  "http://MY_NETWOK_IP:8003",
];
app.use(
  cors({
    origin: allowedOrigins,
    credentials: true, // 使用布尔值而非字符串"true"，符合规范
  })
);

前端代码确认 #

// 确保API_URL指向实际局域网IP，例如http://192.168.x.x:8003
const response = await axios.get(API_URL, { withCredentials: true });

补充说明 #

• 若开发环境需测试sameSite: None，需配合HTTPS使用，可通过mkcert生成本地证书搭建HTTPS代理，否则浏览器会忽略sameSite: None设置。
• 生产环境必须使用HTTPS，否则sameSite: None和secure: true的组合无法生效，且存在安全隐患。

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