Axios giving 404 error after delete action

Question

I am running a React app which has a few methods to update user data. One of these features is to delete movies from a favorites movies list using Axios axios.delete :

removeFavorite(event, favorite) {
  event.preventDefault();
  console.log(favorite);
    axios.delete(`https://flix-app-test.herokuapp.com/users/${localStorage.getItem('user')}/favorites/${favorite}`, {
      headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
    })
      .then(response => {
        this.getUser(localStorage.getItem('token'));
      })
      .catch(err => {
        console.log(err);
      });
  }

This is the code living in index.js file:

app.delete('/users/:username/movies/:movieId', passport.authenticate('jwt', { session: false }), function(req, res) {
  Users.findOneAndUpdate({ username : req.params.username }, {
    $pull : { favorites : req.params.movieId }
  },
  { new : true }, // This line makes sure that the updated document is returned
  function(err, updatedUser) {
    if (err) {
      console.error(err);
      res.status(502).send("Error: " + err);
    } else {
      res.json(updatedUser)
    }
  });
});

For some reason, I am getting a 404 error message when I try to delete a movie:

Error: "Request failed with status code 404" createError createError.js:16 settle settle.js:17 handleLoad xhr.js:59 dispatchXhrRequest xhr.js:34 xhrAdapter xhr.js:11 dispatchRequest dispatchRequest.js:59 promise callback*request Axios.js:53 method Axios.js:68 wrap bind.js:9 getUser main-view.jsx:58 componentDidMount main-view.jsx:89 React 6 unstable_runWithPriority scheduler.development.js:818 React 10 parcelRequire<["index.jsx"]< index.jsx:21 newRequire src.78399e21.js:47 parcelRequire src.78399e21.js:81 src.78399e21.js:120

I am unable to find out from where the error comes from, once the authorization is fine, the correct movie is picked up as a response and the messages are shown on console accordingly.

Could any of the colleagues here to help me to find where the error lies? Thanks in advance.

PS: @SuleymanSah provided the solution for the 404 error below, BUT I am adding my own solution as well - to the axios.delete action not working. Check below.

Answer 1

The url in your delete does not match the url in the express app. You should change favorites to movies to resolve the 404 error.

And to be able to delete the favorite, you should update your code using $in .

app.delete('/users/:username/movies/:movieId', passport.authenticate('jwt', { session: false }), function(req, res) {
  Users.findOneAndUpdate({ username : req.params.username }, {
    $pull : { favorites : { $in: req.params.movieId } }
  },
  { new : true }, 
  function(err, updatedUser) {
    if (err) {
      console.error(err);
      res.status(502).send("Error: " + err);
    } else {
      res.json(updatedUser)
    }
  });
});

Depending one how you store the favorites, you may need to pull like this:

      $pull: {
        favorites: {
          _id: { $in: req.params.movieId }
        }
      }

Answer 2

@SuleymanSah has gracefully provided the solution for the 404 error, but for me, the core problem - the axios.delete not removing entries from the list array, remained.

It turned out that axios.delete only could delete entries made by the app using axios.post . Entries created straight on mongoDB array could not be deleted using axios . So, if you are having a hard time deleting entries, try creating a feature to add them first and deleting them after. In my case, only app-created entries could be app-deleted.