React前端调用Node.js后端authCheck接口遇401未授权问题

核心问题分析 #

前端通过Axios请求受JWT Cookie保护的接口时，浏览器未正确携带jwt-netflix Cookie，导致后端中间件返回401；而Postman/Thunder Client不受浏览器跨域Cookie策略限制，因此能正常请求。以下是具体原因和解决方案：

1. Cookie的SameSite属性配置错误 #

后端设置Cookie时，若SameSite设为Strict，在前端与后端端口不同（如前端3000、后端5000）的跨域场景下，浏览器会拒绝自动携带Cookie。Postman/Thunder Client不受该规则约束，因此请求正常。

解决方法：
修改后端设置Cookie的代码，根据环境配置合适的SameSite属性：

res.cookie("jwt-netflix", token, {
  httpOnly: true, // 防止XSS攻击，必须保留
  secure: process.env.NODE_ENV === "production", // 生产环境启用HTTPS时设为true
  sameSite: process.env.NODE_ENV === "production" ? "None" : "Lax", // 生产用None（需配合Secure），开发用Lax
  maxAge: 30 * 24 * 60 * 60 * 1000, // Cookie有效期30天
});

2. CORS配置的Origin设置冲突 #

若后端CORS配置中origin设为*，同时开启credentials: true，这属于浏览器禁止的冲突配置，会导致Cookie无法携带。必须指定具体的前端域名/地址。

解决方法：
修改后端CORS配置，指定前端的具体Origin：

const cors = require('cors');
const corsOptions = {
  origin: process.env.FRONTEND_URL || "http://localhost:3000", // 替换为你的前端地址
  credentials: true,
};
app.use(cors(corsOptions));

3. Axios的withCredentials配置未生效 #

虽然单个请求添加了withCredentials: true，但如果全局Axios配置被覆盖，或存在请求拦截器修改了配置，会导致Cookie不被携带。

解决方法：
全局配置Axios的withCredentials，确保所有请求都携带Cookie：

// 在Axios初始化的文件中添加
import axios from 'axios';
axios.defaults.withCredentials = true;

同时检查是否存在请求拦截器，避免移除withCredentials配置。

4. 浏览器本地跨域Cookie策略限制 #

部分浏览器（如Chrome）对localhost跨域场景的Cookie处理较为严格，可能导致Cookie无法正常携带。

临时测试方法：
启动Chrome时添加以下参数（仅用于开发测试，禁止用于日常浏览）：

--disable-web-security --user-data-dir=/tmp/chrome_dev

若测试后请求正常，则说明是浏览器策略问题，可通过上述前3种方法彻底解决。

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