从反应发送的 node.js 中的 req.body 为空

Question

我在 React 中创建了一个应用程序。 我正在尝试将 fetch 与一个帖子一起使用到本地主机的不同端口。 我在服务器上收到了请求，但我的身体是空的。 为什么我的身体是空的？ 我不明白。

React 函数中的代码：

export default function Sending() {
    async function handleSubmit(e) {
          e.preventDefault()
          try{
              let result = await fetch('http://localhost:5000',{
                method: 'post',
                mode: 'no-cors',
                headers: {
                  'Accept': 'application/json',
                  'Content-type': 'application/json',
                },
                body: JSON.stringify({ email: 'example@gmail.com' })
              })
    
              console.log(result)
          } catch (error){
            console.log(error)
          }
    }
 return (
    <>
      Have a Form here
    </>
  )
}

浏览器控制台日志：

 Response {type: "opaque", url: "", redirected: false, status: 0, ok: false, …} body: null bodyUsed: false headers: Headers {} ok: false redirected: false status: 0 statusText: "" type: "opaque" url: "" __proto__: Response

我在 node.js 上的简单服务器保留：

const express = require('express')
const bodyParser = require('body-parser')
const app = express()
const port = process.env.PORT || 5000

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

app.post('/', (req, res) => {
  console.log(req.body)
  res.send("Hello")
})

app.get('/hello', (req, res) => {
  res.send("Hello, Benny")
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

Answer 1

考虑安装 cors 并将其添加到您的代码中，如下所示

const cors = require('cors')

app.use(cors())

然后在摩根的帮助下

const morgan = require('morgan');

考虑阅读以前的类似案例，如下所示Express JS is received a empty req.body from ReactJS

Answer 2

1. 您正在尝试发布 JSON
2. 为此，您需要设置'Content-type': 'application/json'请求标头
3. 仅当您获得 CORS 的许可（来自预检请求）时，才允许跨源请求。
4. 你说mode: 'no-cors' ，声明你没有或不想从 CORS 做任何事情的权限，所以浏览器会默默地忽略任何需要 CORS 权限的东西
5. 请求到达服务器时没有'Content-type': 'application/json'所以正文解析器不知道它需要解码 JSON

---

你需要：

• 删除mode: 'no-cors'
• 配置服务器以支持 CORS，包括预检请求

使用cors模块最容易做到这cors

const cors = require('cors')
const app = express()

const corsOptions = {
  origin: 'http://example.com',
}

const configuredCors = cors(corsOptions);

app.options('*', configuredCors)

app.post('/', configuredCors, (req, res) => {
  console.log(req.body)
  res.send("Hello")
})

Answer 3

从第一个冰川开始； 您正在使用 stringify 发送一个字符串。 节点 body-parser 尝试解析 json。 尝试删除字符串化并仅发送对象。