使用 Mongoose 和 Expressjs 在本地主机上创建 API 并从前端获取它

Question

所以我有一个连接到 Mongodb 的 API，通常可以使用 postman 等服务添加数据。然而，当我尝试使用 Web 表单执行相同的操作时，会出现 400 错误，表明这是一个错误的请求，因此来自 Web 表单的数据甚至无法到达我的 API。我的 API 在本地主机上运行，而我的前端只需打开 html 文件即可在本地运行。

需要注意的是我的猫鼬模式只是 { 名称：字符串 } 有一些额外的信息，但它们被设置为默认值，并且它们不是必需的

const formin = document.getElementById('form-not-click')

form.addEventListener('submit', async function(e){
    e.preventDefault()

    const payload = new FormData(formin)

    const sendData = {
        name : 'yyyyy'
    }
    console.log([...payload])

    fetch('http://localhost:3000/customer',{
        method:"POST",
        mode:"no-cors",
        body: JSON.stringify({
            id:'',
            name : 'yyymsdcyy'})
    }).then(res =>res.json).then(data =>console.log(data)).catch(err =>console.log(err))
})

这是我对运行 oinlocalhost 端口 3000 的 api 的获取请求

Answer 1

您的代码似乎存在一些潜在问题，可能会导致 400 Bad Request 错误：

1. No-CORS 模式：您在获取请求中将模式设置为“no-cors”。当向不同来源发出请求时使用此模式，但它限制了响应中返回的信息。但是，就您而言，您的前端和后端都在本地主机上运行，因此您不需要使用“no-cors”模式。

2. FormData 用法：您正在从表单 (

   formin

   ) 创建 FormData 对象，但实际上并未在获取请求中使用它。相反，您发送的是硬编码的 JSON 对象。您应该使用 FormData 对象来发送表单数据。

以下是更新代码的方法：

const form = document.getElementById('form-not-click');

form.addEventListener('submit', async function(e){
    e.preventDefault();

    const formData = new FormData(form);
    const sendData = Object.fromEntries(formData.entries());

    fetch('http://localhost:3000/customer', {
        method: "POST",
        body: JSON.stringify(sendData),
        headers: {
            'Content-Type': 'application/json'
        }
    })
    .then(res => res.json())
    .then(data => console.log(data))
    .catch(err => console.log(err));
});

通过这些更改，您的前端应该正确地将表单数据发送到您的 API，并且您应该能够调试与 400 Bad Request 错误相关的任何问题。请务必检查您的后端日志以获取有关请求失败原因的更多信息。