如何让Node.js（Passport.js）本地服务器向React本地服务器发送Cookie并修复跨域认证

服务器端配置调整 #

1. 正确配置CORS中间件 #

确保CORS允许前端域名的请求，并开启凭证支持：

const cors = require('cors');
// 替换为你的React本地服务地址，比如http://localhost:3000
const allowedOrigin = 'http://localhost:3000';

app.use(cors({
  origin: allowedOrigin,
  credentials: true, // 关键：允许携带凭证（Cookie）
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  allowedHeaders: ['Content-Type', 'Authorization']
}));

注意：CORS配置必须放在所有路由和Passport初始化代码之前。

2. 调整Session/Cookie属性 #

修改Express Session和Passport的Cookie配置，确保跨域场景下Cookie能被正确传递：

const session = require('express-session');

app.use(session({
  secret: 'your-secret-key', // 替换为你的密钥
  resave: false,
  saveUninitialized: false,
  cookie: {
    httpOnly: true, // 防止XSS攻击，必须开启
    secure: process.env.NODE_ENV === 'production', // 生产环境设为true（HTTPS），开发环境设为false（HTTP）
    sameSite: process.env.NODE_ENV === 'production' ? 'none' : 'lax', // 跨域场景需设为'none'，但仅在HTTPS下生效；开发环境用'lax'兼容HTTP
    maxAge: 24 * 60 * 60 * 1000 // Cookie有效期，按需调整
  }
}));

// Passport初始化
app.use(passport.initialize());
app.use(passport.session());

开发环境注意：如果使用HTTP协议，sameSite不能设为none（浏览器会拒绝），改用lax即可；生产环境必须用HTTPS并设置sameSite: 'none'和secure: true。

前端请求配置 #

无论使用fetch还是axios，都需要开启凭证携带：

1. Axios示例 #

import axios from 'axios';

// 全局配置，所有请求自动携带Cookie
axios.defaults.withCredentials = true;

// 登录请求示例
axios.post('http://localhost:5000/login', { username, password })
  .then(res => {
    // 处理登录成功逻辑
  })
  .catch(err => {
    // 处理错误
  });

2. Fetch示例 #

fetch('http://localhost:5000/login', {
  method: 'POST',
  credentials: 'include', // 关键：携带Cookie
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ username, password })
})
.then(res => res.json())
.then(data => {
  // 处理登录成功逻辑
})
.catch(err => {
  // 处理错误
});

测试验证步骤 #

1. 启动服务：同时启动Node.js服务器（比如端口5000）和React本地服务（比如端口3000）。
2. 检查响应头：在浏览器开发者工具的「Network」面板中，查看登录请求的响应头是否包含Set-Cookie字段，且字段包含HttpOnly、SameSite等配置。
3. 验证Cookie存储：在「Application」面板的「Cookies」下，确认目标域名下已生成对应的Session Cookie。
4. 测试后续请求：发起需要身份认证的请求（比如获取用户信息），查看请求头是否携带Cookie字段，服务器是否返回正确的认证数据。

常见坑点：如果开发环境下浏览器仍拒绝Cookie，可临时在Chrome中开启「允许不安全的本地Cookie」：打开chrome://flags/#same-site-by-default-cookies，将「SameSite by default cookies」设置为Disabled，重启浏览器后测试。

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