2017-10-20 113 views
1

我有一个恼人的问题。 我正在尝试构建一个简单的网站。该网站使用我使用nodejs和express来构建的api。在开发API时,我经常使用邮差检查功能。一切工作,并仍然正常工作(使用邮差)。快递不路由一些jQuery请求

现在我开始在我的网站上工作。第一个GET和POST工作正常。 (我尝试了一些轻量级的Ajax库,没有工作,只有jQuery似乎为我工作)

现在我试图使用PUT动词更新项目。再次更新使用邮差工作正常。但尝试使用jQuery并不会以正确的方式触发正确的路由。为了检查,我添加了一个简单的console.log,如果明确使用了最后一个中间件,它也返回一个404 statuscode和一个console.log在处理PUT的函数中。每次我使用jQuery来更新一个元素时,它会转到404。如果我使用Postman,我会看到来自PUT函数的消息。

我APIController(含快递的NodeJS):

let express = require('express'); 
//let path = require('path'); 
let bodyParser = require('body-parser'); 
let mongoose = require('mongoose'); 
mongoose.connect('mongodb://localhost:27017/test', { useMongoClient: true }); 
require('./Models/InitModels'); 

let app = express(); 
app.use(function(req, res, next) { 
    res.header("Access-Control-Allow-Origin", "*"); 
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); 
    next(); 
}); 
app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded({ extended: true})); 

let routes = require('./Routes/APIRoutes'); 
routes(app); 

// catch 404 and forward to error handler 
app.use(function(req, res, next) { 
    res.status(404); 
    console.log("Returning 404 to request"); 
}); 

app.set('port', 2017); 
app.listen(2017); 
console.log("Starting API Controller"); 

API路由(只显示地图在这里很重要):

module.exports = function(app) { 
let benutzer = require('../Controller/BenutzerController'); 
let gruppe = require('../Controller/GruppenController'); 
let zugriffslog = require('../Controller/ZugriffsLogController'); 
let karten = require('../Controller/KartenController'); 
let zugriffszeit = require('../Controller/ZugriffsZeitenController'); 

app.route('/karten') 
    .put(karten.put) 
    .post(karten.post) 
    .delete(karten.delete); 

然后是KartenController:

exports.post = (req, res) => { 
    if (req.body.search) { 
     Karte.find(req.body.search) 
      .populate('benutzer').populate('gruppen') 
      .exec((err, karten) => { 
       res.json(karten) 
      }); 
    } else if(req.body.karte) { 
     if (this.createdKarte !== null) { 
      res.json({"error": {"code": 110}}); // card needs to be scanned 
     } else { 
      let newKarte = new Karte(req.body.karte); 
      newKarte.save(); 
      //this.createdKartenDatum = new Date(); 
      res.json(newKarte); 

      // Add Karte To User 
      //Benutzer.findOneAndUpdate({_id: newKarte.benutzer}, {$push: {karten: newKarte._id}}); 
      //Benutzer.findOneAndUpdate({_id: newKarte.benutzer}, {$pull: {karten: newKarten._id}}); 

      this.kartenCreateDatum = new Date(); 
      this.createdKarte = newKarte; 
      this.kartenScannPending = true; 

      // Abort after some time 
      setTimeout(scannTimeExpired, timeTillCreationExpires); 
     } 
    } else if(req.body.status) { 
     if (this.kartenScannPending) { 
      res.json({"status": {"code": 300}}); // waiting for card to be scanned 
     } else if (this.kartenScannFehler !== null) { 
      res.json(this.kartenScannFehler); // fehler aufgetreten 
      this.kartenScannFehler = null; // aufräumen 
     } else if (this.kartenScannErfolgreich) { 
      res.json({"status": {"code": 500, "date": this.kartenCreateDatum}}); // karte gescanned 
      this.kartenScannErfolgreich = false; 
     } else { 
      res.json({"status": {"code": 404}}); // no card needs to be scanned 
     } 
    } else { 
     res.json({ "error": "U SUCK" }); 
    } 
}; 

exports.put = (req, res) => { 
    console.log("Trying to put a Card)"); 
    if (req.body.karte) { 
     if (req.body.karte.name && req.body.karte._id) { 
      Karte.findOneAndUpdate({_id: req.body.karte._id}, {$set: req.body.karte}, {new: true},(err, karte) => res.json(karte)); 
     } else { 
      res.json({"error": {"code": 120}}); 
     } 
    } else { 
     res.json({"error": {"code": 120}}); 
    } 
}; 

我的JavaScript看起来像这样:

$.ajax({ 
    type: "POST", 
    context: this, 
    url: "http://localhost:2017/karten", 
    data: { 
     search: { 
      benutzer: { 
       _id: this.benutzer._id 
      } 
     } 
    }, 
    async: true, 
    success: function (data) { 
     console.log(data); 
    }, 
    dataType: "json" 
}); 

// Zugriffszeiten abfragen 
$.ajax({ 
    type: "PUT", 
    context: this, 
    url: "http://localhost:2017/karten", 
    data: { 
     karte: { 
      _id: this.karte._id, 
      name: "PLS WORK !!!" 
     } 
    }, 
    async: true, 
    success: function (data) { 
     console.log(data); 
    }, 
    dataType: "json" 
}); 

结果:

第一招:

是工作,给了我两张卡的阵列

二之一:

让我一个ERR :: EMPTY_RESPONSE(因为404) 和控制台的NodeJS输出 “返回404,以请求”

试图与邮差相同,一切正常和卡更新

我真的希望somone可以帮助我,因为我现在正在这个相当长的时间工作,似乎不能看到我的错误。

感谢您阅读一切:)

+0

您是否检查权限设置? Ajax请求不能简单地通过不同的端口。 –

+1

我想知道这是否是来自浏览器的跨源请求。如果是这样,您将不得不支持服务器上的OPTIONS请求,以便跨请求请求将被允许用于PUT请求。一个简单的POST或者GET只能用于你已经在做的CORS头文件,但是一个PUT可能需要一个OPTIONS请求处理程序。 – jfriend00

+1

如果您在浏览器调试器中打开网络选项卡并观察浏览器在进行这些Ajax调用时的行为,那么您可能会看到OPTIONS请求正在发送并返回一个404. – jfriend00

回答

1

感谢jfriend00,我找到了解决问题的办法。我没有正确回应请求 - 请求。 我不得不一些代码行添加到我的APIController:

app.use(function(req, res, next) { 
    res.header("Access-Control-Allow-Origin", "*"); 
    res.header("Access-Control-Allow-Methods", "POST, GET, PUT, DELETE"); 
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); 

    // The routes wont fire on that options-request, so it sends a 404 response and thus the ajax request times out 
    //intercepts OPTIONS method 
    if ('OPTIONS' === req.method) { 
     //respond with 200 
     console.log("Received options request"); 
     res.send(200); 
    } 
    else { 
     //move on 
     next(); 
    } 
}); 

现在一切正常。