React无法从Node API获取数据，CORS问题未解决求助

看起来你遇到的核心问题有两个：CORS跨域限制，以及Node.js后端的响应发送逻辑错误，同时React组件里还有一个会导致无限请求的小问题。咱们一步步来解决：

1. 修复Node.js后端的CORS中间件顺序 #

在你的server.js里，路由中间件的加载顺序在CORS中间件之前，这会导致请求到达路由时还没有应用CORS规则，浏览器自然会拦截跨域请求。

修改server.js，把CORS中间件移到路由挂载之前：

const express = require('express');
const cors = require('cors');
const { pool } = require("./db/dbConfig")
const app = express();
const port = process.env.PORT || 4000;
const homeRouter = require("./routes/home")

// 先加载CORS中间件，确保所有路由都能应用跨域规则
app.use(cors());
app.use(express.json());
// 再挂载路由
app.use("/", homeRouter);

app.listen(port, () => {
  console.log(`We are live on port: ${port}`);
});

2. 修复Node.js路由的重复响应问题 #

你的路由代码里同时调用了res.json()和res.send()，这会触发后端报错——因为一个HTTP请求只能发送一次响应，后面的res.send()根本不会执行，还会导致响应状态异常。

修改routes/home.js，只保留JSON格式的响应：

const router = require('express').Router();
router.route('/').get((req, res) => {
  let displayData=[{ user:'a', id:1 }, { user:'b', id:2 } ]
  // 只发送一次JSON响应即可
  res.status(200).json(displayData);
})
module.exports = router

3. 修复React组件的无限请求问题 #

你的useEffect没有设置依赖数组，这会导致组件每次渲染都重复执行fetch请求，不仅浪费资源，还可能引发不必要的错误。

修改App.js里的useEffect，添加空依赖数组确保只在组件挂载时执行一次：

useEffect(() => {
  let headers = new Headers({
    "Content-Type": "application/json",
    Accept: "application/json",
  });
  fetch(`http://localhost:4000/`, headers)
    .then((res) => res.json())
    .then(
      (result) => {
        setData(result);
        setIsFetched(true)
        console.log("result:", result) // 改成逗号分隔，日志更易读
      },
      (error) => {
        console.log(error);
      }
    );
}, []); // 空数组作为依赖，仅组件挂载时执行一次

关于客户端proxy配置的补充 #

如果你的React项目是用create-react-app创建的，package.json里的proxy配置需要配合相对路径的fetch请求才生效（比如把fetch("http://localhost:4000/")改成fetch("/")）。不过现在我们已经通过后端CORS彻底解决了跨域问题，这个proxy配置可以作为备选方案，但优先保证后端的CORS配置正确。

做完这些修改后，重启你的Node.js服务和React项目，应该就能正常获取数据了。

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