從反應發送的 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。 嘗試刪除字符串化並僅發送對象。