What is the most simplest way of implementing a DELETE request using axios?

Question

I have been unsuccessful in trying to figure out how to solve the following errors, (1st error:)'OPTIONS http://localhost:3000/lists/5a9dca48cebb5a4e5fc1bfe9 404 (Not Found)' and (2nd error:)'Failed to load http://localhost:3000/lists/5a9dca48cebb5a4e5fc1bfe9: Response for preflight has invalid HTTP status code 404.'.

Initially I defined my code along the same lines as the following: https://github.com/20chix/Hotel_System_Vue.js_Frontend/blob/master/src/components/Hello.vue

Seen quite a number of posts similar to my problem, but neither of their suggested solutions have worked for me.

I'm using Vue.js, Axios and Node.js in the back, my collection is defined as follows in MongoDb:

   List: {_id:'', name:'', items:
                [ {
                    title: '',
                    category: ''            
                  }
                ]
           }

GetList.vue:

methods: {
  fetchLists(){
    let uri = 'http://localhost:3000/lists';
    axios.get(uri).then((response) => {
                  this.List = response.data;
                  console.log(this.List[3].items[0]);
                  console.log(this.List);
              });
  },

  DELETE(a_list, id){
    $("#myModal").modal('show');
    this.list = a_list;
    this._id = id;
  },
  deleteList : function(_id){
    // let uri = 'http://localhost:3000/lists/'+_id;
    // this.List.splice(_id, 1);
    axios.delete('http://localhost:3000/lists/'+_id)
    .then((response) => {
      this.fetchLists();
      //refreshes Application
      // window.location.reload();
    })
    .catch((error) => {
      console.log(error);
    });


  }

ListController:

exports.delete_a_list = function(req, res)=>{
console.log(req.params);
List.deleteOne({req.params.listId}, function(err, list){
    if(err){res.json(err);};
    else
    {res.json({list: 'List successfully deleted'});}
  };
});

UPDATE:

Upon running 'npm install cors --save', it was stored in my package.json . server/package.json:

{
  "name": "api",
  "version": "1.0.0",
  "description": ":)",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js"
  },
  "keywords": [
    ":)"
  ],
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^1.17.1"
  },
  "dependencies": {
    "cors": "^2.8.4",
    "express": "^4.16.2",
    "mongoose": "^5.0.8",
    "npm": "^5.7.1"
  }
}

UPDATE:

I tried the following too:

ObjectID = require('mongodb').ObjectID;

exports.delete_a_list = function(req, res){
    // console.log(req.params);
       List.deleteOne({
        _id: ObjectID(req.params.listId)}, function(err, list){
        if(err)
        res.json(err);
         res.json({list: 'List successfully deleted'});
         });
       };'

This returns the same error including:

  xhr.js?ec6c:178 OPTIONS http://localhost:3000/lists/undefined 404 (Not Found)
dispatchXhrRequest @ xhr.js?ec6c:178
xhrAdapter @ xhr.js?ec6c:12
dispatchRequest @ dispatchRequest.js?c4bb:59
Promise.then (async)
request @ Axios.js?5e65:51
Axios.(anonymous function) @ Axios.js?5e65:61
wrap @ bind.js?24ff:9
deleteList @ GetList.vue?c877:131
boundFn @ vue.esm.js?efeb:190
click @ GetList.vue?d584:124
invoker @ vue.esm.js?efeb:2004
fn._withTask.fn._withTask @ vue.esm.js?efeb:1802
:1 Failed to load http://localhost:3000/lists/undefined: Response for preflight has invalid HTTP status code 404.

 createError.js?16d0:16 Uncaught (in promise) Error: Network Error
   at createError (createError.js?16d0:16)
   at XMLHttpRequest.handleError (xhr.js?ec6c:87)

I've just found the following: https://stackoverflow.com/questions/42207958/cannot-delete-error-crud-api-nodejs-mongodb-express, and I am experiencing something fairly similar, when I try a DELETE request in Postman I am shown the below error message. ` Error
Cannot DELETE /lists/5a9c9e34cebb5a4e5fc1bfe4
` — Tj895, Mar 06 '18 at 19:29

score 1 · Answer 1 · answered Mar 06 '18 at 23:01

Thank you guys for all your suggestions.

I found the following video: https://www.youtube.com/watch?v=NEFfbK323Ok, from The Net Ninja, and was able to get it to finally work upon changing my code to reflect his particular method:

listRoutes.js:

app.route('/lists/:_id')
.get(lists.read_a_list)
// .update(lists.update_a_list)
.delete(lists.delete_a_list);

listController.js:

exports.delete_a_list = function(req, res){
// console.log(req.params);
List.findByIdAndRemove({_id: req.params._id}).then(function(list){
    res.send(list);
});

};

GetList.vue:

deleteList : function(_id, List){
axios.delete('http://localhost:3000/lists/'+_id, List)
.then(response => {
  this.List.splice(index, 1);
  //refreshes Application
  // window.location.reload();

  })
}

score 0 · Answer 2 · edited Mar 06 '18 at 12:30

0

Your problem ist related to CORS (cross-origin-resource-sharing).

If you are using node with express then just include this middleware: https://www.npmjs.com/package/cors

edited Mar 06 '18 at 12:30

Borjante

9,767
6
35
61

answered Mar 06 '18 at 10:42

Thomas

2,431
17
22

I have installed this, but it still shows the same error. – Tj895 Mar 06 '18 at 11:18
Please show how and where you included it in express. – Thomas Mar 06 '18 at 12:40

score 0 · Answer 3 · answered Mar 06 '18 at 12:52

0

This query seems wrong:

List.deleteOne({req.params.listId}, ...

Can you try modifying it like this?:

List.deleteOne({_id: ObjectID(req.params.listId}), ...

(You need to have ObjectID declared somewhere up: ObjectID = require('mongodb').ObjectID)

answered Mar 06 '18 at 12:52

Miguel Calderón

3,001
1
16
18

What is the most simplest way of implementing a DELETE request using axios?

3 Answers3