javascript - 发布 http ://localhost:3000/data 400 (Bad Request) when trying to send data from client to server

Question

大家好，我在从客户端向服务器端发送数据时遇到了一些问题。基本上我有一个功能，点击时将名为 categorySearch 的变量设置为一个字符串，例如 categorySearch = "pork"并将其发送到服务器；但出于某种原因，我不断收到标题中提到的错误。这是一些代码:客户端

function getRecipes(category){
    const categorySearch = category.alt;
    const options = {
        method: 'POST',
        headers: {
            'Content-type': 'application/json'
        },
        body: categorySearch
    }
    const response = fetch('/data', options);
    console.log(response);
}

服务器端

const express = require('express');
const app = express();
const fetch = require('node-fetch');
require('dotenv').config();
const API_KEY = process.env.API_KEY;
const port = process.env.PORT || 3000;
app.listen(port, () => console.log('listening at 3000'));
app.use(express.static('public'));
app.use(express.json({ limit: "1mb"}));

app.post('/data', (request, repsonse) => {
    console.log(request.body);
})

不确定我做错了什么，我没有在后端工作太多所以也没有太多知识，非常感谢任何帮助:)

我的最终目标是能够将用户输入的数据或在这种情况下点击的数据发送到服务器，然后在服务器端对搜索引擎进行 api 调用，获取我需要的数据，将其发送回客户端并显示在页面上。

Answer 1

原因:-

400 Bad Request Error是一个HTTP响应状态码，表示由于语法无效，服务器无法处理客户端发送的请求

根据您的代码，您从客户端以 json 格式发送数据，并在您的服务器中以纯文本格式检索数据，因此不要以 application/json 格式发送数据，而是使用 text/plain 或删除该 header 部分以使其正常工作，请查看下面附带的代码。

客户端:-

function getRecipes(category){
const categorySearch = category.alt;
const options = {
    method: 'POST',
    headers: {
        'Content-type': 'text/plain',
    }, // or remove this headers section
    bodydata: categorySearch
}
 const response = fetch('/data', options);
 console.log(response);
}

服务器端:

app.post('/data', (request, response) => {
 console.log(request.body.bodydata);
})

希望这能让您对错误有所了解。在这里阅读更多关于 400 error 的信息