PUT 请求在 Nodejs、axios 中给出“请求失败，状态代码 404”错误消息

问题描述 投票：0回答：1

重大更新：BOOTCAMP 的 API 已损坏。错误不是来自我这边

我遇到了什么问题： 实际问题： 我正在使用 axios、nodejs 进行服务器端工作，遵循 Angela-Yu 的 Webdev Bootcamp。

控制台中的错误是 

Error updating resource: Request failed with status code 404

屏幕和邮递员上的错误是： 

{ "error": "Cannot update resource, given secret with id 51 not found." }

我尝试从第 51 个元素开始，因为从这里开始我可以在此示例 api 中访问。

index.ejs 文件：

<!DOCTYPE html>
<html>

<head>
  <title>Form Example</title>
  <style>
    /* CSS styles */
    body {
      font-family: Arial, sans-serif;
      background-color: #f5f5f5;
      margin: 0;
      padding: 0;
    }

    .container {
      max-width: 600px;
      margin: 50px auto;
      background-color: #fff;
      padding: 20px;
      border-radius: 5px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    h1 {
      text-align: center;
    }

    form {
      margin-top: 20px;
    }

    label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
    }

    input[type="text"],
    input[type="number"] {
      width: 100%;
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
      margin-bottom: 10px;
    }

    input[type="submit"] {
      color: #fff;
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
    }


    .response-area {
      margin-top: 20px;
      background-color: #f0f0f0;

      padding: 20px 5px;
    }

    #get {
      background-color: #2ecc71;
    }

    #get:hover {
      background-color: #27ae60;
    }

    #post {
      background-color: #3498db;
    }

    #post:hover {
      background-color: #2980b9;
    }

    #put {
      background-color: #9b59b6;
    }

    #put:hover {
      background-color: #8e44ad;
    }

    #patch {
      background-color: #f1c40f;
    }

    #patch:hover {
      background-color: #f39c12;
    }

    #delete {
      background-color: #e74c3c;
    }

    #delete:hover {
      background-color: #c0392b;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="response-area">
      <p>
        <%= content %>
      </p>
    </div>
    <form id="myForm" method="post">
      <label for="idInput">Id:</label>
      <input type="text" id="idInput" name="id">

      <label for="secretInput">Secret:</label>
      <input type="text" id="secretInput" name="secret">

      <label for="scoreInput">Score:</label>
      <input type="number" id="scoreInput" name="score">

      <label for="submit">Route:</label>
      <input id="get" type="submit" value="GET" formaction="/get-secret">
      <input id="post" type="submit" value="POST" formaction="/post-secret">
      <input id="put" type="submit" value="PUT" formaction="/put-secret">
      <input id="patch" type="submit" value="PATCH" formaction="/patch-secret">
      <input id="delete" type="submit" value="DELETE" formaction="/delete-secret">
    </form>
  </div>
</body>

</html>

index.js 文件：

import express from "express";
import axios from "axios";
import bodyParser from "body-parser";

const app = express();
const port = 3000;
const API_URL = "https://secrets-api.appbrewery.com";

//Add your own bearer token from the previous lesson.
const yourBearerToken = "21a12878-d279-4482-b96c-396818ae9b8b";
const config = {
  headers: { Authorization: `Bearer ${yourBearerToken}` },
};

app.use(bodyParser.urlencoded({ extended: true }));

app.get("/", (req, res) => {
  res.render("index.ejs", { content: "Waiting for data..." });
});

app.post("/get-secret", async (req, res) => {
  const searchId = req.body.id;
  try {
    const result = await axios.get(API_URL + "/secrets/" + searchId, config);
    res.render("index.ejs", { content: JSON.stringify(result.data) });
  } catch (error) {
    res.render("index.ejs", { content: JSON.stringify(error.response.data) });
  }
});

app.post("/post-secret", async (req, res) => {
  try {
    const result = await axios.post(API_URL + "/secrets", req.body, config);
    res.render("index.ejs", { content: JSON.stringify(result.data) });
  } catch (error) {
    res.render("index.ejs", { content: JSON.stringify(error.response.data) });
  }
});

app.post("/put-secret", async (req, res) => {
  const searchId = req.body.id;
  try {
    const result = await axios.put(
      API_URL + "/secrets/" + searchId,
      req.body,
      config
    );
    res.render("index.ejs", { content: JSON.stringify(result.data) });
  } catch (error) {
    res.render("index.ejs", { content: JSON.stringify(error.response.data) });
    console.error("Error updating resource:", error.message);
  }
});

app.post("/patch-secret", async (req, res) => {
  const searchId = req.body.id;
  try {
    const result = await axios.patch(
      API_URL + "/secrets/" + searchId,
      req.body,
      config
    );
    res.render("index.ejs", { content: JSON.stringify(result.data) });
  } catch (error) {
    res.render("index.ejs", { content: JSON.stringify(error.response.data) });
  }
});

app.post("/delete-secret", async (req, res) => {
  const searchId = req.body.id;
  try {
    const result = await axios.delete(API_URL + "/secrets/" + searchId, config);
    res.render("index.ejs", { content: JSON.stringify(result.data) });
  } catch (error) {
    res.render("index.ejs", { content: JSON.stringify(error.response.data) });
  }
});

app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

我哪里出错了？

我用邮递员尝试了同样的事情，它给出了相同的结果，即 404 错误。

附加问题： 后来我尝试按照此链接中给出的教程通过邮递员测试放置请求，但即使在那里它也失败了。在那里我得到了错误： 

{ "message": "Error Occured! Page Not found, contact [email protected]" }

更新附加问题： 关于通过邮递员测试放置请求，我尝试了

https://dummy.restapiexample.com/api/v1/update/25
而不是
https://dummy.restapiexample.com/api/v1/update/21
的放置请求，并且它有效！

所以问题只存在于实际问题中。

node.js express axios put serverside-javascript
1个回答
0
投票

我正在做这个练习，并且我在使用 PUT/PATCH/DELETE 时也遇到了问题。

要解决此问题，请尝试 GitHub 存储库中的 Secrets-api。

  1. 首先，将 zip 存档 https://github.com/appbrewery/api-example-secrets-api/tree/main 克隆或保存到您的计算机，并通过运行 

    npm install
    ;

    安装依赖项

  2. 运行app.js（

    node app.js
    或
    nodemon app.js
    ）；

  3. 要注册新用户并创建新的身份验证令牌，请尝试使用 Postman 中的新链接 

    http://localhost:4000
    ；

  4. 在练习 (index.js) 中，使用生成的令牌并替换 API_URL。

const API_URL = "http://localhost:4000"
和 
const yourBearerToken = "yourGeneratedToken"
；

  1. 进行练习时，使用两个不同的终端来保持两个服务在后台运行。

希望我的反馈对您有帮助。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.