服务器成功处理了请求但未能return数据

Question

API在失眠工具上执行成功，响应成功。但是，在我的浏览器上，它不会以成功状态响应，而是将状态显示为 204 并且（已取消）控制台上也没有错误消息。尽管 204 & canceled 状态，测试数据也已成功添加到数据库中。服务器在本地主机上运行。问题是，尽管如此，我还是没有收到预期的响应“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",
      });
    });

...

Answer 1

因为上面写着cancelled，估计是cors的问题。您可以将鼠标悬停在“已取消”上，工具提示将显示原因。

您可能需要多配置 cors。

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

Answer 2

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

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

更新：

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

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

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

Answer 3

已解决：

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

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

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

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

服务器成功处理了请求但未能return数据

The server successfully processed the request but failed to return the data

api

post

node.js

reactjs