服务器成功处理请求但未能返回数据答案

【问题标题】：The server successfully processed the request but failed to return the data服务器成功处理请求但未能返回数据
【发布时间】：2021-12-27 00:45:01
【问题描述】：

API在insomnia Tool上执行成功，响应成功。但是，在我的浏览器上，它没有以成功状态响应，而是将状态显示为 204 并且（已取消）控制台上也没有错误消息。尽管处于 204 & 取消状态，测试数据也成功添加到数据库中。服务器在本地主机上运行。问题是尽管如此，我没有收到预期的响应“statusCode”：200， "message": "用户添加成功"

感谢任何帮助！谢谢！

客户端 API 调用

         import axios from "axios";
            
                 let addUser = () => {
                        axios
                          .post(`http://localhost:3000/users/signup`, {
                            firstName: "testFirstName",
                            lastName: "testLastName",
                            email: "testEmail@gmail.com",
                            password: "testPassword",
                          })
                          .then((res) => {
                            console.log(res);
                            console.log(res.data);**
                          })
                          .catch((e) => {
                            console.log(e);
                          });
                      };
return (
    <form>
    ... 
         <button type="submit" onClick={addUser}>submit</button>
    ...
    </form>
);

服务器端

const express = require("express");
const userRouter = express.Router();
const { User } = require("../../models");
const bcrypt = require("bcrypt");

userRouter.post("/signup", async (req, res) => {
  // get req body

  const { firstName, lastName, email, password } = req.body;

  //validate incoming request

  try {
    const user = User.build({
      firstName,
      lastName,
      email,
      password,
    });
    await user.validate();
  } catch (e) {
    res.status(400).json({
      statusCode: 400,
      message: "validation failed",
      details: e.errors[0].message,
    });

    return;
  }

  //encrypt the password with bcrypt

  const saltRounds = 10;
  try {
    let hash = await bcrypt.hash(password, saltRounds);

    // update database
    let user = await User.create({
      firstName,
      lastName,
      email,
      password: hash,
    });

    // respond to the request

    res.status(200).json({
      statusCode: 200,
      message: "User added Succcessfully",
      data: user,
    });
  } catch (e) {
    res.status(500).json({
      statusCode: 500,
      message: "Internal Server Error",
      details: e.errors[0].message,
    });
  }
});

在我的 (nodeJS) 主服务器 Index.JS 文件中，我启用了所有 CORS 请求

...

    const cors = require("cors");
    
    app.use(cors());
    
    app.use(express.json());
    
    app.listen(3000, async () => {
      console.log("http://localhost:3000/");
      try {
        await db.sequelize.sync({ alter: true });
      } catch (e) {
        console.log(`Database not connected due to error ${e}`);
      }
    });
    
    app.use("/users", userRouter); // Mount the router as middleware at path /user
    
    
    app.use((req, res) => {
      res.status(404).json({
        msg: " file not found",
      });
    });

...

【问题讨论】：

你在失眠时发送什么标题？你应该在代码中做同样的事情
为什么会有退货？ return 不应大写
@A.Zaveri 可以分享调用addUser的UI代码
@Andy addUser 被 onClick 事件调用

标签： node.js reactjs api post

【解决方案1】：

尝试将您的按钮标记更改为

 <button type="button" onClick={() => addUser()}>submit</button>

更新：

为了在上面的答案中添加更多上下文，请求被取消的原因是代码有一个 <form> 环绕 <button type='submit'>。单击提交按钮将提交form，这将取消由提交按钮的单击事件触发的请求。

有几种方法可以解决这个问题：

通过将按钮更改为常规type="button"（这样它就不会提交表单）。
将event.preventDefault(); 添加到onClick 事件处理程序中，这样点击事件就不会冒泡提交表单。
完全删除 <form> 包装器，因为在这种情况下它并没有真正使用。
为form 添加一个onsubmit 事件处理程序并将axios 代码移入其中。

【讨论】：

【解决方案2】：

因为它说已取消，这可能是一个 cors 问题。您可以将鼠标悬停在“取消”上，工具提示会显示原因。

您可能需要更多配置 cors。

app.use(cors(
  {
    origin: "*",
    methods: "GET,HEAD,PUT,PATCH,POST,DELETE",
    "Access-Control-Allow-Credentials": true
  }
));

【讨论】：

【解决方案3】：

已解决：

原因是，元素提交表单时点击事件中断了 API 调用。因此，该动作导致负载中断。当新导航中断现有导航时，可能会发生这种情况。

为了防止请求被取消，JavaScript event.preventDefault();必须调用：

请阅读以下帮助我解决此问题的文章，希望对您也有帮助！

https://newbedev.com/what-does-status-canceled-for-a-resource-mean-in-chrome-developer-tools

【讨论】：