React中Axios调用Express登录接口出现404 Not Found错误求助

以下是针对你的问题的具体排查和解决方案：

1. 核心问题：代理配置与请求路径不匹配 #

你提到package.json中配置了代理"http://localhost:8800/api"，这很可能是导致404的关键。React的proxy配置应该指向后端服务器的根地址，而非API前缀路径。

举个例子：

• 如果你的Express后端登录接口实际是POST http://localhost:8800/auth/login（无/api前缀）
• 当你设置代理为"http://localhost:8800/api"，前端发送/auth/login请求时，代理会将其转发到http://localhost:8800/api/auth/login——这个路径后端不存在，自然返回404；而你用Postman直接请求http://localhost:8800/auth/login是正常的，这就完全符合你的症状。

2. 修正配置步骤 #

步骤1：调整package.json的代理配置 #

将代理改为后端服务器的根地址：

"proxy": "http://localhost:8800"

注意：修改package.json后必须重启React开发服务器，新的代理配置才会生效。

步骤2：匹配前端请求路径与后端接口 #

根据你的后端路由结构调整请求路径：

• 如果后端登录接口是http://localhost:8800/auth/login：
  前端Axios请求使用相对路径：

  axios.post('/auth/login', loginData)
  

• 如果后端登录接口是http://localhost:8800/api/auth/login（后端路由带/api前缀）：
  前端Axios请求使用相对路径：

  axios.post('/api/auth/login', loginData)
  

3. 额外排查点 #

检查Axios的baseURL配置 #

如果在AuthContext中全局设置了Axios的baseURL，比如：

axios.defaults.baseURL = '/api'

要确保这个前缀和后端接口路径匹配，同时和代理配置兼容。例如：

• 代理为"http://localhost:8800"
• baseURL为/api
• 前端请求/auth/login会被拼接为/api/auth/login，最终转发到http://localhost:8800/api/auth/login，对应后端的/api/auth/login路由。

查看浏览器Network请求 #

打开Chrome开发者工具的Network标签，查看发送的请求URL：

• 确认请求的路径是否正确
• 检查请求的状态码和响应信息，进一步定位问题

确认后端路由顺序 #

确保Express的登录路由定义在其他中间件（比如express.static）之后，避免路径被提前拦截。

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