獲取帖子請求中的空體

Question

我正在為 javascript 中的 fetch API 苦苦掙扎。 當我嘗試使用 fetch 將某些內容發布到我的服務器時，請求正文是一個空數組。 但是當我使用 Postman 時它可以工作......這是我在 NodeJS 中的服務器代碼：

const express = require('express')
const app = express()
const port = 3000

app.use(express.json())
app.post('/api', function (req, res) {
    console.log(req.body)
})
app.listen(port)

這是我的客戶：

fetch('http://"theserverip":3000/api', {
    method: 'POST',
    headers: { "Content-Type": "application/json" },
    mode: 'no-cors',
    body: JSON.stringify({
        name: 'dean',
        login: 'dean',
    })
})
.then((res) => {
    console.log(res)
})

問題是在 SERVER 端，req.body 是空的。 有人能幫我嗎？ 謝謝 ！

Answer 1

問題是

mode: 'no-cors'

從文檔...

防止方法不是 HEAD、GET 或 POST 之外的任何內容，以及標題不是簡單標題之外的任何內容

簡單的內容類型頭限制允許

• text/plain ,
• application/x-www-form-urlencoded ，和
• multipart/form-data

這會導致您精心制作的Content-Type: application/json標頭變為content-type: text/plain （至少在通過 Chrome 測試時）。

由於您的 Express 服務器需要 JSON，因此它不會解析此請求。

我建議省略mode配置。 這將使用默認的"cors"選項。

---

由於您的請求並不簡單，您可能希望向 Express 服務器添加一些CORS 中間件。

另一個（有點hacky）選項是告訴Express 將text/plain請求解析為JSON。 這允許您將 JSON 字符串作為簡單的請求發送，這也可以避免飛行前的OPTIONS請求，從而降低整體網絡流量...

app.use(express.json({
  type: ['application/json', 'text/plain']
}))

編輯：向app.use最終代碼塊添加了結束括號。

Answer 2

請參閱文檔 模式， no-cors模式只發送簡單的標題。 所以將content-Type改為text/html; 而不是application/json因此您的服務器無法識別正文格式並返回空。

刪除mode: 'no-cors',你應該沒問題。

Answer 3

為了補充提到刪除mode: 'no-cors'選項的優秀答案，如果您不想向 Express 添加CORS 中間件，您可能只想在OPTIONS塊下處理“預檢”請求：

app.options('*', (req, res) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type'); // Add other headers here
  res.setHeader('Access-Control-Allow-Methods', 'POST'); // Add other methods here
  res.send();
});

另一個不錯的答案： https : //www.vinaygopinath.me/blog/tech/enable-cors-with-pre-flight/

希望這可以幫助！

Answer 4

似乎沒有一個對我有用我使用中間件解決了這個問題

app.use(restify.plugins.bodyParser());

或者

app.use(multer().array())

Answer 5

上述許多答案都沒有解決我的問題，因此遇到此問題的任何人都可能需要做我需要做的事情，並使他們的app能夠讀取主體中的 JSON，因為該應用程序無法通過default 這是導致空體的原因

我通過添加解決了這個問題：

app.use(bodyParser.json());

添加這一行后，POST/PUT 請求發送正文沒有問題

從技術上講， bodyParser模塊已被棄用，因此這不是最理想的解決方案，但如果將上述行添加到您的代碼中使其工作，那么您至少知道您的問題在於您的應用程序可以解析/讀取 JSON 的方式身體

Answer 6

如果您想使用fetch獲取響應，請考慮使用res.send ：

    app.post('/api', function (req, res) {
        res.send(req.body)
    })