React+Express项目Axios请求500错误排查求助

问题背景 #

搭建React前端+Express后端项目时，前端通过Axios请求/api/products接口返回500错误，报错信息如下：

HomeScreen.js:12 Uncaught (in promise) AxiosError {message: 'Request failed with status code 500', name: 'AxiosError', code: 'ERR_BAD_RESPONSE'}

已确认前后端同时运行，尝试过相关方案未解决，请求排查。

排查与修复步骤 #

1. 修正前端代理协议不匹配问题 #

前端package.json中proxy配置为https://localhost:3000，但后端启动的是HTTP服务（控制台日志显示server at http://localhost:3000），协议不匹配导致请求失败。

修改后package.json关键配置：

{
  "name": "frontend",
  "proxy": "http://localhost:3000",
  // 其余配置保持不变
}

修改后重启前端开发服务。

2. 后端添加错误捕获与规范响应格式 #

后端路由未做错误处理，若数据加载失败直接返回500但无具体错误信息，无法定位问题。

修改后server.js代码：

import express from 'express';
import data from './data.js';
const app = express();

app.get('/api/products', (req, res) => {
  try {
    // 用res.json确保返回标准JSON格式，替代res.send
    res.json(data.products);
  } catch (error) {
    console.error('接口异常:', error);
    res.status(500).json({ 
      message: '服务器内部错误', 
      detail: error.message 
    });
  }
});

const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`server at http://localhost:${port}`);
});

修改后重启后端，直接在浏览器访问http://localhost:3000/api/products：

• 若返回正常产品JSON，说明后端服务正常；
• 若仍返回500，查看后端控制台打印的错误信息，排查data.js是否存在路径错误、导出异常等问题。

3. 修复前端useEffect无限循环问题 #

HomeScreen.js中的useEffect未设置依赖数组，会导致组件每次渲染都重复发起请求，可能引发异常。同时添加try-catch捕获请求错误，便于定位问题。

修改后HomeScreen.js关键代码：

useEffect(()=>{
  const fetchData=async()=>{
    try {
      const result=await axios.get('/api/products')
      setProducts(result.data) 
    } catch (err) {
      console.error('产品数据请求失败:', err);
    }
  }
  fetchData()
}, []) // 添加空依赖数组，仅组件挂载时执行一次

4. 排查端口冲突问题 #

Create React App默认启动端口为3000，若后端也使用3000端口，会导致端口冲突。可修改后端端口：

修改server.js端口配置：

const port = process.env.PORT || 5000;

同步修改前端package.json的proxy为http://localhost:5000，重启前后端服务。

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