MERN栈Express下发的JWT Cookie无法在React客户端存储问题

Postman不受浏览器同源策略、Cookie安全规则限制，因此接口测试时Cookie正常返回，但浏览器环境下存在三个核心问题导致Cookie无法写入：

• 后端未配置正确的CORS跨域规则，未开启跨域凭证允许开关，浏览器会拦截跨域响应中的Set-Cookie头
• 下发Cookie时缺失sameSite属性配置，Chrome 80+版本后默认Cookie规则为SameSite=Lax，跨域场景下会直接拦截第三方Cookie写入
• 前端请求配置存在冗余错误：credentials: "include"是Fetch API的专属配置项，axios无法识别该参数，单请求零散配置withCredentials容易出现漏配问题

1. Express后端配置修复 #

第一步：配置正确的CORS规则 #

先安装CORS依赖（如果未手动写跨域中间件）：

npm i cors

在服务端入口文件（main.js/app.js）中添加跨域配置，注意：开启凭证支持时禁止将origin设为通配符*，必须明确指定前端源地址：

const cors = require('cors');

app.use(cors({
  // 本地开发填React运行地址，生产环境替换为线上前端域名
  origin: "http://localhost:3000",
  // 核心：允许跨域请求携带、写入Cookie
  credentials: true
}))

如果是自己手写跨域中间件，确保响应头包含以下配置：

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
  res.setHeader('Access-Control-Allow-Credentials', true);
  res.setHeader('Access-Control-Allow-Methods', 'GET,POST,PUT,DELETE,OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
  next();
})

第二步：补全Cookie属性配置 #

修改登录接口中res.cookie的配置，补上sameSite规则，同时根据环境区分secure配置：

res.cookie("jwt", userToken, {
  expires: new Date(Date.now() + 500000),
  httpOnly: true,
  // 生产环境HTTPS协议下开true，本地HTTP开发环境设为false
  secure: process.env.NODE_ENV === "production",
  // 生产环境跨域场景设为"none"，本地同域/代理场景设为"lax"
  sameSite: process.env.NODE_ENV === "production" ? "none" : "lax"
});

注意：生产环境如果sameSite设为"none"，必须同时将secure设为true，也就是前后端必须使用HTTPS协议，否则浏览器会拒绝写入Cookie。

2. React前端请求修复 #

首先删除axios请求中无效的credentials: "include"参数，建议直接全局配置axios的withCredentials属性，避免每个接口重复配置：

// 在项目的axios封装文件/入口文件中添加全局配置
import axios from 'axios';
// 本地开发如果未配置React代理，就填后端服务地址；配了代理可以省略baseURL配置
axios.defaults.baseURL = 'http://localhost:5000';
// 全局开启跨域Cookie携带/写入支持
axios.defaults.withCredentials = true;

修改登录请求代码，移除冗余配置：

const log = async () => {
  try {
    const response = await axios.post("/login", userLogin)
    // 此处写登录成功后的业务逻辑
  } catch (err) {
    // 此处写错误提示逻辑
    console.error(err)
  }
};

额外说明：如果本地开发时在React的package.json中配置了proxy字段指向后端服务地址，属于浏览器视角的同域请求，此时可以省略CORS相关配置，但仍建议补全Cookie的sameSite属性，避免部分浏览器版本的默认规则拦截。

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