React项目中Axios请求/pins接口出现404错误求助

核心排查与修复步骤 #

• 先确认后端接口是否正常：打开浏览器直接访问 http://localhost:8800/api/pins，如果能返回数据，说明后端接口没问题；如果也报404，先检查后端路由配置。
• 检查后端路由挂载是否正确：确保Express的Index.js里正确引入并挂载了pins路由，代码示例如下：

  const pinsRouter = require('./routes/pins');
  // 必须确保路径是/api/pins，和你定义的接口一致
  app.use('/api/pins', pinsRouter);
  

  仔细核对拼写，别把路径写成/pins或者其他错误格式。
• 重启React开发服务器：修改package.json的代理配置后，必须重启React的dev服务才能生效。关闭当前的npm start进程，重新启动一次。
• 验证代理是否生效：打开浏览器开发者工具的Network标签，发起请求后查看请求的实际地址。如果请求地址是http://localhost:3000/pins（假设React运行在3000端口）且返回404，说明代理没生效；正常情况下应该转发到http://localhost:8800/api/pins。
• 直接使用完整路径测试：如果代理配置始终不生效，暂时绕过代理，把Axios请求改成完整路径：

  axios.get('http://localhost:8800/api/pins')
  

  能获取数据的话，再回头排查代理配置问题。

容易踩的坑 #

• 代理地址末尾别加斜杠："proxy":"http://localhost:8800/api" 不要写成 "proxy":"http://localhost:8800/api/"，否则会导致路径拼接成http://localhost:8800/api//pins，引发404。
• 确认后端服务端口：确保Express确实运行在8800端口，别和React的端口（默认3000）搞混。

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