Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/node.js/34.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Node.js 使用axios实现删除请求的最简单方法是什么?_Node.js_Vue.js_Vuejs2_Axios_Http Delete - Fatal编程技术网

Node.js 使用axios实现删除请求的最简单方法是什么?

Node.js 使用axios实现删除请求的最简单方法是什么?,node.js,vue.js,vuejs2,axios,http-delete,Node.js,Vue.js,Vuejs2,Axios,Http Delete,我在尝试解决以下错误时失败,(第一个错误:)“选项404(未找到)”和(第二个错误:)“加载失败:飞行前的响应具有无效的HTTP状态代码404”。” 最初,我按照以下相同的行定义代码: 看到很多类似我的问题的帖子,但是他们提出的解决方案都不适合我 我在后面使用Vue.js、Axios和Node.js,我的集合在MongoDb中定义如下: List: {_id:'', name:'', items: [ { title:

我在尝试解决以下错误时失败,(第一个错误:)“选项404(未找到)”和(第二个错误:)“加载失败:飞行前的响应具有无效的HTTP状态代码404”。”

最初,我按照以下相同的行定义代码:

看到很多类似我的问题的帖子,但是他们提出的解决方案都不适合我

我在后面使用Vue.js、Axios和Node.js,我的集合在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);
    });


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

  })
}
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'});}
  };
});
更新:

在运行“npm install cors--save”时,它存储在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"
  }
}
更新:

我也尝试了以下方法:

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'});
         });
       };'
这将返回相同的错误,包括:

  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)

您的问题与CORS(跨来源资源共享)有关

如果您在express中使用node,则只需包含以下中间件:

此查询似乎错误:

List.deleteOne({req.params.listId}, ...
你能试着这样修改它吗

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

(您需要在上面的某个地方声明
ObjectID
ObjectID=require('mongodb')。ObjectID

谢谢大家的建议

我找到了以下视频:,来自网络忍者,并且能够将其传送到最后修改代码以反映其特定方法:

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:

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


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

  })
}

我已经安装了这个,但它仍然显示相同的错误。请显示您在express中如何以及在何处包含它。我刚刚发现以下内容:,我遇到了非常类似的情况,当我在Postman中尝试删除请求时,会显示以下错误消息<代码>错误无法删除/列出/5a9c9e34cebb5a4e5fc1bfe4