注册调用SENDOTP API返回401 Unauthorized错误求助

核心问题定位 #

调用SENDOTP接口返回401，Postman测试正常但前端联调失败，主要由以下几类原因导致：

1. HTTP/HTTPS协议不匹配 #

前端API配置中BASE_URL使用了https://localhost:4000，但实际后端服务运行在http协议下，导致请求URL错误，浏览器拦截请求或后端返回401。

解决方案：
修改API配置文件中的BASE_URL，与后端协议保持一致：

const BASE_URL = "http://localhost:4000/api/v1"

2. 邮箱已注册触发后端401逻辑 #

后端sendOTP控制器中，检测到邮箱已存在时会返回401状态码，但前端错误处理未区分该场景，统一提示"发送失败"，导致误以为是权限问题。

解决方案：
优化前端错误处理，针对401状态码给出明确提示：

// 在sendOtp函数的catch块中修改
catch (error) {
  console.log("SENDOTP API ERROR............", error);
  if (error.response?.status === 401) {
    toast.error("该邮箱已注册，请直接登录");
  } else {
    toast.error("发送OTP失败，请稍后重试");
  }
}

3. Axios未配置跨域凭证 #

Postman无需处理浏览器跨域限制，但前端请求时如果后端CORS要求携带凭证（如Cookie），Axios未开启withCredentials会导致请求被拦截，返回401。

解决方案：
修改Axios实例配置，开启跨域凭证：

// API连接器文件中修改axiosInstance
export const axiosInstance = axios.create({
  withCredentials: true,
});

4. 后端CORS配置缺失或错误 #

确保后端CORS配置允许前端域名访问，并支持携带凭证：

// Express框架下的CORS配置示例
const cors = require('cors');
const corsOptions = {
  origin: "http://localhost:3000", // 替换为你的前端实际域名
  credentials: true,
};
app.use(cors(corsOptions));

验证步骤 #

1. 确认前后端协议一致（均为HTTP或HTTPS）
2. 使用未注册的邮箱测试接口，观察是否返回200
3. 检查浏览器控制台的请求详情，确认请求URL、Headers是否正确
4. 验证后端CORS配置是否正确允许前端域名

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