本文详解为何前端调用后端登录接口返回 401 Unauthorized（而 Postman 正常），核心原因在于跨域请求中未携带 Cookie 凭据，需在 Axios 请求中显式设置 withCredentials: true，并确保前后端 CORS 配置协同生效。
本文详解为何前端调用后端登录接口返回 401 unauthorized（而 postman 正常），核心原因在于跨域请求中未携带 cookie 凭据，需在 axios 请求中显式设置 withcredentials: true，并确保前后端 cors 配置协同生效。
在基于 Express + React/Vite 的全栈开发中，常见场景是：后端运行在 http://localhost:1000，前端运行在 http://localhost:5173。当用户提交登录表单（含 email 和 password）时，前端通过 Axios 发起 POST 请求，后端校验凭证并设置 Session/Cookie（如使用 express-session 或 JWT Cookie），但浏览器却报错：
Failed to load resource: the server responded with a status of 401 (Unauthorized)
而同一请求在 Postman 中返回 200 OK —— 这一关键差异揭示了问题本质：Postman 默认发送所有 Cookie，而浏览器跨域请求默认不发送 Cookie，除非显式声明。
✅ 正确解决方案：前后端双向配置
1. 后端（Express）CORS 配置（必须）
const cors = require('cors');
app.use(cors({
origin: 'http://localhost:5173', // 精确匹配，不可用通配符 *（与 credentials 冲突）
credentials: true, // 允许携带认证信息（Cookie、HTTP 认证头等）
optionsSuccessStatus: 200 // 某些旧版浏览器需要
}));⚠️ 注意：
HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库，专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。 涵盖 40 个组件的官方文档参考，支持声明式与编程式两种初始化方式，提供 $cm/$m 数据访问方法。
-
origin必须为具体 URL（不能是*），否则credentials: true将被浏览器拒绝； - 若使用
express-session，还需确保 session 配置启用sameSite: 'lax'或'none'（后者需配合secure: true，本地开发可设为'lax'）； - 确保后端响应头中实际包含
Access-Control-Allow-Credentials: true（cors中间件会自动注入）。
2. 前端（Axios）请求配置（关键！）
// 登录请求示例（React + Axios）
axios.post('http://localhost:1000/api/login', {
email: 'user@example.com',
password: '123456'
}, {
withCredentials: true // ✅ 必须显式开启！否则 Cookie 不会被发送
})
.then(res => console.log('Login success:', res.data))
.catch(err => console.error('Login failed:', err.response?.status));? 为什么 withCredentials: true 不可省略？
浏览器出于安全策略，默认跨域请求不携带 Cookie、Authorization 头等敏感凭据。withCredentials: true 是向浏览器发出明确指令：“本次请求需附带当前域的 Cookie”，从而让服务端能读取 Session ID 或 JWT Cookie 并完成身份校验。
3. 补充验证点（排查 401 的其他可能）
- ✅ 检查后端登录路由是否正确解析
req.body（需app.use(express.json())和app.use(express.urlencoded({ extended: true }))）； - ✅ 确认后端校验逻辑未因缺少
req.session或req.cookies.token而直接返回 401； - ✅ 浏览器开发者工具 → Application → Cookies，查看登录成功后是否有
connect.sid（Session）或自定义 token Cookie 写入； - ✅ 若使用 HTTPS 生产环境，
sameSite: 'none'必须搭配secure: true，否则 Cookie 被拒绝。
总结
401 错误在跨域登录场景中，90% 以上源于 withCredentials: true 缺失。它不是可选优化项，而是启用 Cookie 认证的强制前提。务必同步检查后端 CORS 的 origin 精确性与 credentials: true，以及前端请求层的凭据开关。配置完成后，登录请求将正常携带凭证，服务端可识别用户状态，彻底解决“Postman 正常、浏览器 401”的典型跨域认证陷阱。
立即学习“前端免费学习笔记（深入）”；
