2017-10-20 132 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(); 
    } 
}); 

現在一切正常。