Question

我正在尝试将 react 连接到 express 服务器，但是当我尝试接收使用 react 应用程序发送的数据时，在后端的 req.body 中我得到一个空对象，这是我的 react 代码：< /p>

export default function App() {
  let [text, setText] = useState("");
  const sendToServer = () => {
    axios
      .post("http://localhost:4000/test", {
        text: text
      })
      .then((res) => console.log(res))
      .catch((err) => console.log(err));
  };

  return (
    <div className="app">
      <input
        type="text"
        onChange={(e) => setText(e.target.value)}
      />
      <button onClick={sendToServer}>Send</button>
      <p>{text}</p>
    </div>
  );
}

这是我的后端：

const express = require("express");
const bodyParser = require("body-parser");
const app = express();
const cors = require('cors');

app.use(cors('http://localhost:3000'));

app.use(bodyParser.urlencoded({extended: false}));

app.use("/test", (req, res, next) => {
    console.log(req.body);

});

app.use((req, res, next) => {
  console.log(`server listening`);
});

app.listen(4000);

我在 package.json 文件中使用了代理，但它仍然不起作用。在 /test 请求中，我得到一个空对象。

Answer 1

添加app.use(bodyParser.json({ limit: '10mb' }));

Answer 2

将 app.use 改为 app.post

app.post("/test", (req, res, next) => {
    console.log(req.body);
});

参考文档 Express Routing

Answer 3

也许你应该添加 res.data 而不是 res

向后端发送 post 请求返回空的 req.body

3 个答案: