使用Axios调用本地API遇404错误，附HomeScreen.js代码求助

别慌，咱们一步步拆解排查这个问题：

1. 先确认后端服务是否正常运行 #

首先得确保你的本地后端服务器（http://127.0.0.1:5000）已经启动并监听5000端口。直接在浏览器地址栏访问 http://127.0.0.1:5000/api/products，看看能不能正常拿到数据：

• 如果直接访问就返回404，那问题出在后端路由上——检查后端代码里的路由定义，是不是拼写错误（比如大小写、多/少了斜杠），或者这个/api/products端点根本没配置。
• 如果直接访问能拿到数据，再往下排查前端代理的问题。

2. 验证前端代理是否生效 #

打开浏览器开发者工具（F12）的Network面板，刷新页面后找到/api/products的请求：

• 查看Request URL是不是你的前端服务地址（比如http://localhost:3000/api/products）
• 检查Response Headers里有没有代理相关的标识（比如X-Forwarded-For），确认请求是否被正确转发到5000端口。

如果代理没生效，试试这两个操作：

• 重启前端开发服务器：有时候package.json里的proxy配置需要重启才能生效。
• 换成setupProxy.js配置（CRA推荐的更可靠方式）：在src目录下新建setupProxy.js文件，写入以下代码：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://127.0.0.1:5000',
      changeOrigin: true,
    })
  );
};

然后重启前端服务，这个方式比package.json的单条proxy配置更灵活，适配更多场景。

3. 给Axios请求添加错误捕获 #

你的代码里没有错误处理逻辑，请求失败时看不到具体原因。修改fetchData函数，加上try/catch：

const fetchData = async () => {
  try {
    const {data} = await axios.get("/api/products");
    setProduct(data);
  } catch (error) {
    console.error('获取数据失败:', error.response?.data || error.message);
  }
}

这样控制台会输出详细的错误信息，帮你判断是后端返回的404，还是请求根本没发出去。

4. 检查路径与请求方法匹配 #

确认后端的/api/products端点是否接受GET请求，有没有权限拦截（比如需要携带token但你没加），这些情况也可能导致404或其他错误。另外注意路径的斜杠细节：比如后端是不是/api/products而不是/api/products/（多了末尾斜杠），避免路径不匹配。

按上面的步骤排查，应该能快速定位问题~

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