前端Axios调用后端登录接口出现404错误的解决问询

1. 核对代理路径与后端路由的匹配关系 #

你在package.json里配置的代理是"http://localhost:8800/api/"，这意味着前端发起的请求/auth/signin会被代理转发到http://localhost:8800/api/auth/signin。如果后端的登录路由是/auth/signin（没有/api前缀），自然会返回404。

• 解决方案：
  • 要么修改前端请求路径：把axios.post("/auth/signin")改成axios.post("/api/auth/signin")，保持代理配置不变；
  • 要么调整代理配置：把package.json里的代理改成"http://localhost:8800"，这样前端请求/auth/signin会直接转发到http://localhost:8800/auth/signin，和后端路由匹配。

2. 验证后端路由的准确性 #

确认后端的登录路由确实是POST方法的/auth/signin，没有拼写错误（比如大小写、字段遗漏），同时检查路由前缀：

• 如果后端给所有API加了/api前缀（比如app.use("/api", authRouter)），前端请求必须带上/api前缀才能匹配；
• 检查后端是否正确挂载了登录路由，有没有漏掉类似app.use("/auth", authRouter)的代码。

3. 检查Axios请求的参数格式 #

你同时收到ERR_BAD_REQUEST错误，大概率是请求体不符合后端要求：

• 确保请求头包含Content-Type: application/json，Axios发送JSON数据时会自动设置，但如果是表单数据需要手动调整；
• 核对发送的参数字段名（比如用户名、密码的key）是否和后端接收的一致，避免因参数缺失或字段不匹配导致后端返回400错误。

4. 确认代理配置生效 #

如果使用Create React App，修改package.json的代理配置后必须重启前端服务才能生效，确认你已经重启了3000端口的前端项目。

5. 直接测试后端接口 #

用Postman或curl直接请求http://localhost:8800/auth/signin（POST方法，带上正确参数）：

• 如果直接请求也返回404，说明后端路由存在问题，重点排查后端代码；
• 如果直接请求正常，问题则出在前端代理或请求路径上。

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