React JS调用登录接口返回401 Unauthorized错误排查求助

问题排查步骤 #

401错误是你后端authUser控制器校验邮箱密码失败后主动返回的，按以下顺序排查即可：

1. 排查前端传参是否正确 #

• 在submitHandler的axios.post调用前添加打印代码，确认你输入的邮箱、密码被正确收集且无多余空格、空值问题：

console.log('前端提交参数', {email, password})

• 冗余代码清理：你已经定义了请求头config变量，实际请求时没有使用，直接重写了headers，虽然不影响功能，但建议统一使用config变量，写法更简洁。

2. 排查后端是否正常接收请求参数 #

• 在authUser控制器第一行添加打印代码，确认能正常拿到前端传的参数：

console.log('后端接收参数', req.body)

• 如果打印结果是undefined，说明你后端入口文件（一般是server.js/app.js）缺少json解析中间件，添加以下代码即可：

app.use(express.json())

这是最常见的问题原因，express默认不会解析json格式的请求体，不加这个中间件拿不到前端传的参数，校验必然失败。

3. 排查数据库与校验逻辑问题 #

• 确认你输入的邮箱已经完成注册，存在于你的用户表中；
• 检查userModel.js中的matchPassword方法实现是否正确，确认明文密码和数据库存储的加密密码比对逻辑没有错误，比如bcrypt比对的参数顺序是否写反、加密规则是否统一。

4. 排查代理配置问题 #

如果你的后端服务运行端口不是3000（比如常见的5000），需要在前端项目的package.json中添加代理配置，否则请求会打到前端服务本身导致找不到接口：

"proxy": "http://localhost:5000"

额外优化点 #

你的loginScreen组件名首字母为小写，不符合React组件命名规范，建议改为LoginScreen，避免后续出现意料之外的渲染问题。

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