POST 請求不起作用 - 發送空對象 [NodeJS]

Question

我正在構建這個學校項目，我們必須在 NodeJs 和自由選擇前端創建自己的 API。 我寫了以下代碼：[在公共地圖中] app.js

function getAll() {
    console.log("Get all")
    makeRequest("/poems", "GET")
} 

async function getRandomPoem() {
    const ids = [1, 2, 3, 4, 5, 6, 7]
    const randomId = ids[Math.floor(Math.random() * ids.length)]
    const arrayofPoems = await fetch("/poems/" + randomId, {method: "GET"})
    const data = await arrayofPoems.json()

    const titleBox = document.getElementById("title")
    const authorBox  = document.getElementById("author")
    const textBox = document.getElementById("text")

    titleBox.innerText = data.title
    authorBox.innerText = data.author
    textBox.innerText = data.text
}

function addPoem() {
    event.preventDefault();
    let title = document.getElementById("titleInput").value
    let author = document.getElementById("authorInput").value
    let text = document.getElementById("textInput").value

    let newPoem = [{
        id: 8,
        title: "Aaa",
        author: "Ccc",
        text: "Ddd"
    }]
    makeRequest("/poems/", "post", newPoem)
}


async function makeRequest(url, reqMethod, body) {
    
    const response = await fetch(url, {
      //  headers = { "Content-Type": "application/json" },
        method: reqMethod,
        body:JSON.stringify(body)
    })
    console.log(response)
    const data = await response.json()
    console.log(data)
}

[這里是對本地服務器的請求] server.js

const express = require('express');
const { poems } = require('./Poems/poemsArray');
const app = express();
const port = 8080;
const allPoems = require('./Poems/poemsArray')

app.use(express.json())
app.use("/", express.static('public'))


app.listen(port, console.log(`App listening on port ${port}`)) 


//  ----------------   POEMS RESOURCE, All endpoints ------------------ //

// Get all
app.get('/poems', (req, res, next) => {
   res.json(allPoems)
})

// Get specific
app.get('/poems/:id', (req, res, next) => {
   const id = req.params.id
   const onePoem = allPoems.find((poem) => poem.id == id)

   if(onePoem) {
       res.json(onePoem)
   } else {
       res.status(404).json({ status: "Poem not found! "})
   }
})

// Post a poem
app.post('/poems', (req, res, next) => {
   allPoems.push(req.body)
   res.json({ status: "A new poem has been posted!"})
})

[最后，帶有輸入字段的 HTML，值應與 POST req 一起發送] index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Poems from outer space</title>
    <script src="app.js"></script>
</head>

<body>
    <div id="container">

        <div id="poem-container">
            <h1 style="color:red;text-align:center;">Poems</h1>
            <p style="text-align: center;">Generate a random poem about space!
                <button onclick="getRandomPoem()">Generate my poem!</button>
            </p>

        <div id="showPoem">
            <h1 id="title"><!-- Title of poem injected --></h1>
            <h2 id="author"><!-- Author of poem injected --></h2>
            <p id="text"><!-- Text of poem injected --></p>
        </div>

        <div id="image-container">
            <!-- INJECTED BY EXTERNAL NASA API -->
            <!-- EXAMPLE IMAGE TO TEST DELETE WHEN API WORKS -->
            <img src="img/apod.jpg" alt="Test Image" width="600px" id="img">
        </div>



    </div>
     
    <div id="form-container">
        <form method="post" action="/poems">
            
                <h1>Send us your poem!</h1>
                <label>Your title:</label> <br>
                <input type="text" requirede name="title" id="titleInput"> <br> 
                <label>Your name:</label> <br> 
                <input type="text" required name="author" id="authorInput"> <br> <br>
                <label>Your poem:</label> <br>
                <input type="text" required name="text" id="textInput" style="width:500px;height:500px">
                <br>
            
                <button type="submit" onclick="addPoem()">Send</button>
        
        </form>
    </div>




    </div>

    
</body>
</html>

在 function addPoem() 中， let newPoem 用於測試目的。 標題、作者和文本應該來自表格。 任何人都可以看到我做錯了什么？

編輯：在makeRequest function header 被注釋掉，那是因為如果我把它留在我的代碼中，突然沒有請求工作了？

謝謝大家！

Answer 1

您使用 headers = 這是無效的。 嘗試標題：{}。 當您得到空的 object 時，嘗試記錄請求。 也有可能正文作為字符串發送，express.json() 中間件無法解析數據。 結果，您得到空的 object。

 async function makeRequest(url, reqMethod, body) { const response = await fetch(url, { headers: { "Content-Type": "application/json" }, method: reqMethod, body:JSON.stringify(body) }) console.log(response) const data = await response.json() console.log(data) }

Answer 2

如果您在一段時間后嘗試訪問 postman，也可能在發送正文時出現問題。 在我的情況下，我在 API 中完成了所有更改，添加了路由器，刪除了驗證等，但最終罪魁禍首是 postman，因為無論我發送什么數據，它都將 request.body 顯示為 {}（空）。 在我重新安裝了 postman 之后，它工作了，我只是覺得更快樂。 我花了 3-4 個小時所以你也可以考慮這個選項。

POST 請求不起作用 - 發送空對象 [NodeJS]

問題描述

2 個解決方案

解決方案1
0 已采納 2020-08-05 09:21:57

解決方案2
0 2021-09-01 02:45:19

POST 請求不起作用 - 發送空對象 [NodeJS]

問題描述

2 個解決方案

解決方案1 0 已采納 2020-08-05 09:21:57

解決方案2 0 2021-09-01 02:45:19

解決方案1
0 已采納 2020-08-05 09:21:57

解決方案2
0 2021-09-01 02:45:19