使用Axios发起GET请求遇404 Not Found错误，Postman可正常调用API

以下是针对该问题的具体排查步骤：

1. 确认代理配置是否生效 #

• 若在package.json中配置了"proxy": "http://localhost:5000"，修改后必须重启React开发服务器才能生效。
• 若项目使用react-scripts v2及以上版本，复杂路由建议用setupProxy.js配置（需先安装http-proxy-middleware），示例代码：

  const { createProxyMiddleware } = require('http-proxy-middleware');
  module.exports = function(app) {
    app.use(
      '/api',
      createProxyMiddleware({
        target: 'http://localhost:5000',
        changeOrigin: true, // 关键：保证请求头Host匹配后端服务
      })
    );
  };
  

• 查看浏览器Network面板的请求URL：正常代理后，请求地址应为http://localhost:3000/api/projects（前端服务端口），而非直接请求后端5000端口。

2. 验证后端路由与服务状态 #

• 从后端配置来看，完整接口路径应为http://localhost:5000/api/projects，直接在浏览器访问该地址：
  • 若无法访问：检查后端服务是否启动、端口是否为5000、路由挂载逻辑是否正确（确认app.use('/api', router)与router.get('/projects', ...)的组合）。
  • 若能访问：说明后端服务正常，问题出在前端代理或请求路径。

3. 检查Axios请求路径正确性 #

• 确保React代码中的请求路径为绝对路径：axios.get('/api/projects')（开头带斜杠），避免相对路径导致的错误（比如页面路由为/dashboard时，相对路径api/projects会变成/dashboard/api/projects，触发404）。
• 通过浏览器Network面板查看Request URL，确认实际请求路径与后端接口完全匹配。

4. 排查跨域与请求头问题 #

• 代理配置中需确保changeOrigin: true，否则后端可能因Host不匹配拒绝请求。
• 若后端有额外请求头校验（比如Token、Referer），需确认Axios请求是否携带了正确的请求头。

5. 其他排查点 #

• 检查端口冲突：确保后端5000端口、前端3000端口未被其他程序占用。
• 清空浏览器缓存或用无痕模式测试，排除缓存或Service Worker的干扰。
• 若后端运行在Docker容器中，确认容器端口已正确映射到本地5000端口，且前端能通过localhost访问到容器服务。

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