PUT request gives "Request failed with status code 404" error message in nodejs, axios

Question

MAJOR UPDATE: THAT BOOTCAMP'S API IS BROKEN. ERROR ISN'T FROM MY SIDE

What problem I had had: Actual Problem: I'm working on server side using axios, nodejs, following Angela-Yu's Webdev Bootcamp.

Error in console is Error updating resource: Request failed with status code 404

Error on screen and postman is: { "error": "Cannot update resource, given secret with id 51 not found." }

I was trying for the 51st element onwards since that's from where onwards I have access to in this examplar api.

index.ejs file:

<!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 file:

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}`);
});

Where am I going wrong?

I tried the same thing with postman and it gave the same result, i.e, 404 error.

Additional problem: Later I tried to follow through the tutorial given in this link Testing put request via postman, and even there it failed. There I got the error: { "message": "Error Occured! Page Not found, contact [email protected]" }

Update on the additional problem: Regarding Testing put request via postman, I tried teh put request for https://dummy.restapiexample.com/api/v1/update/25 instead of https://dummy.restapiexample.com/api/v1/update/21 and it worked!

so the problem only remains with the actual one.

Tyler2P · Accepted Answer · 2024-01-19 13:21:50Z

1

I was doing this exercise, and I also had a problem using PUT/PATCH/DELETE.

To solve this, try the secrets-api from the GitHub repository.

First, clone or save the zip archive https://github.com/appbrewery/api-example-secrets-api/tree/main to your computer and install the dependencies by running npm install;
Run the app.js (node app.js or nodemon app.js);
To register a new user and create a new authentication token try to use the new link http://localhost:4000 in Postman;
In your exercise (index.js), use the generated token and replace the API_URL.

const API_URL = "http://localhost:4000"

And:

const yourBearerToken = "yourGeneratedToken";

When doing the exercise, use TWO different terminals to keep the TWO services running in the background.

I hope my feedback is helpful.

edited Jan 19, 2024 at 13:21

Tyler2P

2,37030 gold badges26 silver badges34 bronze badges

answered Jan 18, 2024 at 3:28

Anastasya Artemicheva

111 bronze badge

Sign up to request clarification or add additional context in comments.

1 Comment

Jimmy_st Over a year ago

It works! Thank you very much - you save my time and nerves!

Collectives™ on Stack Overflow

PUT request gives "Request failed with status code 404" error message in nodejs, axios

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related