React项目调用localhost:5000/api/activity出现net::ERR_CONNECTION_REFUSED错误

可能原因及解决办法 #

1. 跨域限制（浏览器同源策略） #

Postman不受浏览器同源策略约束，但网页会被拦截。解决方式二选一：

• 后端开启CORS：如果用Node.js/Express，安装cors包并启用：

  const cors = require('cors');
  const app = express();
  app.use(cors()); // 生产环境建议配置允许的具体域名，不要直接开放所有来源
  

• React代理配置（create-react-app项目适用）：
  在package.json里加一行proxy配置：

  {
    "proxy": "http://localhost:5000"
  }
  

  然后把axios请求改成相对路径：

  axios.get('/api/activity')
  

  改完重启React开发服务器。

2. 确认后端服务与网络状态 #

• 检查后端服务是否真的在5000端口运行，别Postman测试完就关了服务
• 试试在浏览器地址栏直接访问http://localhost:5000/api/activity，看能不能拿到数据，如果不行，排查防火墙或安全软件是否拦截了端口
• 把请求里的localhost换成127.0.0.1试试，有些环境下localhost解析有问题

3. 修正代码里的笔误 #

你的代码里有两处明显笔误，会导致功能异常甚至报错：

• seActivities应该是setActivities，这是useState生成的正确更新函数名
• responce拼写错误，正确是response
  另外建议加上错误捕获，方便排查问题：

const [activities, setActivities] = useState([]); // 修正set函数名
useEffect(() => {
    axios.get('http://localhost:5000/api/activity')
        .then(response => { // 修正拼写
            console.log(response);
            setActivities(response.data);
        })
        .catch(err => { // 添加错误捕获
            console.error('请求失败:', err);
        })
},[])

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