ReactJS中用jQuery/AJAX请求API遇404等问题求助

核心问题1：404错误的根源 #

你的Express服务器只注册了GET /api接口，但前端用$.post发送的是POST请求，服务器找不到匹配的路由，因此返回404。

核心问题2：跨域（CORS）限制 #

前端与服务器运行在不同端口（比如React默认3000，服务器3001），浏览器会触发同源策略限制，导致跨域请求被拦截。

额外问题：React状态更新错误 #

setData = data是错误用法——useState返回的setter是函数，必须通过调用的方式更新状态：setData(data)。

修复步骤与代码修改 #

1. 调整服务器端代码（server.js）

首先安装CORS依赖：

npm install cors

修改后的server.js：

const express = require("express");
const cors = require("cors");

const PORT = process.env.PORT || 3001;
const app = express();

// 允许前端跨域请求
app.use(cors());
// 解析POST请求的JSON/表单数据
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

// 保留原GET接口（可选）
app.get("/api", (req, res) => {
  res.json({ message: "Hello from server!" });
});

// 添加匹配前端POST请求的路由
app.post("/api", (req, res) => {
  const { username, password } = req.body;
  console.log("收到参数：", username, password);
  res.json({ message: "POST请求已接收", username });
});

app.listen(PORT, () => {
  console.log(`Server listening on ${PORT}`);
});

2. 调整前端代码（client/app.js）

import React from "react";
import "./App.css";
import $ from "jquery";

function App() {
  const [data, setData] = React.useState(null);
  const [error, setError] = React.useState(null);

  const api = "http://localhost:3001/api";

  React.useEffect(() => {
    $.post(
      api,
      {
        username: "bobs",
        password: "pizza",
      },
      function (responseData, status) {
        console.log(status, responseData);
        setData(responseData); // 正确调用状态更新函数
      }
    )
    .fail(function(jqXHR, textStatus, errorThrown) { // 添加错误捕获
      console.error("请求失败：", textStatus, errorThrown);
      setError(`请求失败：${textStatus}`);
    });
  }, []);

  if (error) {
    return <div>{error}</div>;
  }

  return <> {!data ? "Loading..." : JSON.stringify(data)} </>; // 对象直接渲染会报错，转成字符串
}

export default App;

验证步骤 #

1. 重启服务器：运行node server.js（或你的自定义启动命令）
2. 启动前端应用，此时Network面板中应该能看到成功的POST请求，页面会显示服务器返回的JSON数据

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