配置CORS后前端请求后端出现401未授权错误，Postman请求正常

基础信息 #

• 后端服务地址：localhost:1000
• 前端服务地址：localhost:5173
• 需求：实现用户登录功能，获取邮箱、密码表单数据，当前因401错误导致注册流程失败
• 关键差异：Postman请求接口返回200状态码，仅前端跨域请求返回401

当前配置与报错 #

初始CORS配置 #

app.use(cors({ origin: "http://localhost:5173", credentials: true }));

前端控制台报错 #

Failed to load resource: the server responded with a status of 401 (Unauthorized)

尝试过的调整（仍报错） #

app.use(cors({
                'allowedHeaders': ['Content-Type'],
                'origin': 'requested link',
                'preflightContinue': true,
                'credentials': true
              }));

排查与解决方案 #

1. 确保前端请求携带凭证 #

后端已开启credentials: true，但前端需对应配置才能携带Cookie等凭证：

• 若使用axios：

  axios.post('/api/login', formData, { withCredentials: true })
  

• 若使用fetch：

  fetch('/api/login', {
    method: 'POST',
    credentials: 'include',
    body: formData
  })
  

2. 修正CORS配置参数 #

第二次尝试的origin: 'requested link'为无效值，需明确指定前端地址，同时按需补充鉴权相关请求头：

app.use(cors({
  origin: "http://localhost:5173",
  allowedHeaders: ['Content-Type', 'Authorization'], // 按需添加鉴权类头
  credentials: true,
  preflightContinue: false // 无需开启，避免手动处理预检请求
}));

3. 检查后端鉴权逻辑 #

• 确认鉴权中间件不对OPTIONS预检请求做校验：预检请求不会携带凭证，强制校验会直接返回401
• 对比Postman与前端请求的头信息，检查是否缺少Authorization等关键头，或头格式不一致

4. 调整Cookie跨域配置（若用Cookie存登录态） #

本地开发场景下，需确保Cookie参数适配跨域：

• SameSite设为None（需配合Secure，本地http环境可临时关闭浏览器SameSite限制）
• domain设为localhost

内容的提问来源于stack exchange，提问作者Rutvi Sharma