提问者:小点点

当我使用fetch post发布数据时,我不会接收数据


我的fetch post有问题,我想将数据发送到url,但它不起作用。。

function TodoTaskForm () {
    const taskContentInput = useRef(null)
    const handleSubmit = async (e) => {
        e.preventDefault()
        fetch('/api/tasks', {
            method: 'POST',
            body: JSON.stringify({content: taskContentInput.current.value})
        })
    }

    return (
        <form onSubmit={handleSubmit} className="__component_todolist_form_container">
            <input type="text" name="task" ref={taskContentInput} placeholder="nouvelle tâche.."></input>
        </form>
    )
}

在我的组件中,我在express服务器中执行以下操作:

app.post('/api/tasks', (req, res) => {
    console.log(req.body)
    console.log('request received!')
})

当我进行测试时,我收到了请求,但没有收到req。在我的控制台中返回“{}”,我不明白,我正在使用应用程序。使用(express.json())但它不起作用,我甚至尝试使用主体解析器,但。。。所以求你了,我需要帮助。。非常感谢。


共1个答案

匿名用户

您需要:

  1. 与正在发送的数据相匹配的主体解析器。您已经从发送表单编码数据切换到发送JSON。请注意,Express具有内置的正文解析中间件,并且不需要单独的body-parseNPM模块。
  2. 请求上的一个Content-Type标头,说明数据的格式,以便触发正确的正文解析器。

这样的:

app.post('/api/tasks', express.json(), (req, res) => {
    console.log(req.body)
    console.log('request received!')
})

fetch('/api/tasks', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({content: taskContentInput.current.value})
})