服務器成功處理了請求但是沒有回傳資料

API在失眠工具上執行成功，回應成功。但是，在我的瀏覽器上，它不會以成功狀態回應，而是將狀態顯示為 204 并且（已取消）控制臺上也沒有錯誤訊息。盡管處于 204 & 取消狀態，但測驗資料也成功添加到資料庫中。服務器正在本地主機上運行。問題是，盡管如此，我還是沒有收到預期的回應“statusCode”：200，“message”：“用戶添加成功”

感謝您對此的任何幫助！謝謝！

客戶端 API 呼叫

         import axios from "axios";
            
                 let addUser = () => {
                        axios
                          .post(`http://localhost:3000/users/signup`, {
                            firstName: "testFirstName",
                            lastName: "testLastName",
                            email: "[email protected]",
                            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",
      });
    });

...

uj5u.com熱心網友回復：

嘗試將您的按鈕標記更改為

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

uj5u.com熱心網友回復：

因為它說已取消，所以可能是cors問題。您可以將滑鼠懸停在“已取消”上，工具提示將顯示原因。

您可能需要更多地配置 cors。

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

uj5u.com熱心網友回復：

解決：

原因是，元素在中斷 API 呼叫的單擊事件上提交表單。因此，該動作會導致負載中斷。當新導航中斷現有導航時，就會發生這種情況。

為了防止請求被取消，JavaScript event.preventDefault()；必須被稱為：

請閱讀以下幫助我解決此問題的文章，希望這對您也有幫助！

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

標籤：节点.js 反应 接口 邮政

上一篇：回呼函式中的詞法環境是什么？

下一篇：Django：POST和GET請求并在模板上呈現