MERN应用注册功能前后端联调返回401未授权错误求排查

问题排查步骤 #

先做基础校验：打开浏览器开发者工具「网络」面板，找到提交注册触发的接口请求，逐项对比请求地址、请求方法、请求头、请求体和Postman中调通的请求参数完全一致，Postman会自动补全很多默认参数，手写Fetch容易出现配置遗漏。

1. 前端Fetch配置修复（对应register.js第37行报错） #

401未授权错误90%以上是请求配置不匹配导致，重点核对以下配置项：

• 确认method属性值为POST，和后端注册路由定义的请求方式一致
• 确认Content-Type请求头和传参格式匹配：传JSON参数时设为application/json，传FormData格式不要手动设置该字段，让浏览器自动生成
• 如果后端使用Cookie/Session做身份校验，必须添加credentials: 'include'配置，遗漏的话浏览器不会携带身份凭证，直接触发401
• 不要错误添加Authorization请求头：注册接口为无需登录即可访问的公开接口，携带空值/过期token会触发后端认证拦截
• 确认请求体已做序列化处理：传JSON参数时必须用JSON.stringify()包裹表单对象，不要直接传原生JS对象
  正确配置参考：

const registerRes = await fetch('http://后端服务地址/api/register', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  credentials: 'include',
  body: JSON.stringify(formData)
})

2. 后端跨域配置校验 #

Postman不存在跨域限制，浏览器端的跨域规则会拦截不符合要求的请求：

• 不要在CORS配置中使用通配符*，通配符规则下浏览器禁止携带身份凭证，必须明确指定允许的前端源地址
• 开启跨域凭证允许配置Access-Control-Allow-Credentials: true
  如果用Express的cors包，正确配置示例：

const cors = require('cors')
app.use(cors({
  origin: 'http://前端服务地址:端口', // 例如 http://localhost:3000
  credentials: true
}))

3. 后端路由逻辑排查 #

• 检查注册路由是否错误添加了身份认证中间件（例如JWT校验、Session校验），注册接口无需拦截未登录用户，应该去掉该中间件
• 核对接口参数接收字段和前端传参的字段名完全一致，例如前端传userName后端取username会导致参数缺失，部分后端校验逻辑会错误返回401而非400参数错误
• 校验用户模型字段规则是否匹配，例如密码要求最低6位，前端传参长度不够会触发校验失败，排查错误码返回逻辑是否有误

4. 其他提示说明 #

控制台出现的「等待hrds更新信号」是React开发环境热重载的正常提示，和401错误无关联，生产环境不会出现，可直接忽略。

内容的提问来源于stack exchange，提问作者syedsalman hassan