使用 fetch 时服务器端的主体为空

Question

我正在尝试通过获取 'POST' 请求将 html 表单数据发送到服务器，但在服务器端我收到空请求正文。我已经尝试过针对堆栈溢出提供的不同解决方案，但其中 none 对我有效。谁能帮我找出我哪里出错了。

我的 html 文件中有 ID 为 'signup-form' 的表单
客户端JavaScript代码如下：

const  myForm = document.getElementById('signup-form')

myForm.addEventListener('submit', (e) => {
    e.preventDefault()
    const myForm = document.getElementById('signup-form')
    const data = new FormData(myForm)
    const option= {
        method: 'POST', 
        headers: {
            'Content-type': 'application/json'
        },
        body:JSON.stringify(data)
    }
    fetch('/login', option).then(
        response => response.json()
    ).then(
        data => console.log(data)
    ).catch(
        error => console.log(error)
    )
})

服务器端 express js 代码如下

app.use(express.urlencoded({ extended: false}))
app.use(express.json())

app.post('/login', (req, res) => {
    console.log('url is', req.url)
    const info = req.body;
    console.log('info is:', info)
    res.status(201).json({ 'submitted': true })
})

app.listen(3000, () => {
    console.log('listening on port 3000')
})

Answer 1

使用 FormData 你不能 POST application/json，因为它不在 form 元素支持的 list of content types 上。

相反，写一些类似

的东西

const data = {element1: "value", element2: "value2", ...};

使用 fetch 时服务器端的主体为空

Empty body at server side when using fetch

javascript

node.js

express

fetch-api