如何在MERN栈中让httpOnly Cookie随请求自动发送至服务器？

要让HttpOnly Cookie里的refresh token随每次请求发送到服务器，需要同时配置前端（React）和后端（Node.js/Express）的相关参数，核心是处理跨域凭证传递和Cookie属性设置：

前端（React）配置 #

不管使用axios还是原生fetch，都需要显式开启凭证携带选项：

用Axios的情况 #

• 全局配置（推荐，一次设置所有请求生效）：

  import axios from 'axios';
  
  // 在项目入口文件（如App.js或index.js）中添加
  axios.defaults.withCredentials = true;
  

• 单个请求配置：

  axios.get('/api/your-endpoint', {
    withCredentials: true
  })
  .then(res => { /* 处理响应 */ })
  .catch(err => { /* 处理错误 */ });
  

用Fetch的情况 #

在请求的options中添加credentials: 'include'：

fetch('/api/your-endpoint', {
  method: 'GET',
  credentials: 'include'
})
.then(res => res.json())
.then(data => { /* 处理数据 */ });

后端（Express）配置 #

1. 正确配置CORS #

必须开启credentials: true，同时指定明确的前端源（不能用*，因为带凭证的请求不允许通配符源）：

const cors = require('cors');
const express = require('express');
const app = express();

// 替换为你的React前端实际地址，比如开发环境的http://localhost:3000
const FRONTEND_URL = process.env.FRONTEND_URL || 'http://localhost:3000';

app.use(cors({
  origin: FRONTEND_URL,
  credentials: true
}));

2. 设置Cookie的正确属性 #

设置HttpOnly Cookie时，需确保以下属性配置正确，避免Cookie被浏览器拦截：

// 登录/注册成功后设置refresh token Cookie
res.cookie('refreshToken', refreshToken, {
  httpOnly: true, // 保持该属性，防止XSS攻击
  secure: process.env.NODE_ENV === 'production', // 生产环境必须开启HTTPS，否则设为false
  sameSite: process.env.NODE_ENV === 'production' ? 'none' : 'lax', // 跨域场景设为none，需配合secure: true
  path: '/', // 确保Cookie在全站路径下有效
  maxAge: 7 * 24 * 60 * 60 * 1000 // 示例：7天有效期，可按需调整
});

注意事项 #

• 开发环境下，前端和后端端口不同时，必须保证CORS的origin是前端的准确地址，不能使用*。
• 生产环境必须使用HTTPS，否则secure: true和sameSite: none的Cookie无法被浏览器正常存储和发送。
• 如果涉及子域名场景，需在Cookie中添加domain属性（比如domain: '.yourdomain.com'），确保跨子域名时Cookie能被携带。

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