Ajax Anruf an Express-App gibt keine Daten

Question

Ich baue eine App mit React und Express. Von einer React-Komponente aus rufe ich eine Ajax-Funktion auf, die auf eine bestimmte Express-Route abzielt. Mein Route-Handler empfängt jedoch nicht die Daten, die mit der Ajax-Anforderung übergeben werden.

Mein Express-App (Ich habe die spezifische Strecke in den wichtigsten app.js für Testzwecke):

var express = require('express'); 
var path = require('path'); 
var favicon = require('serve-favicon'); 
var logger = require('morgan'); 
var cookieParser = require('cookie-parser'); 
var bodyParser = require('body-parser'); 

var app = express(); 

var lists = require('./routes/lists'); 

// view engine setup 
app.set('views', path.join(__dirname, 'views')); 
app.set('view engine', 'pug'); 

// uncomment after placing your favicon in /public 
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico'))); 
app.use(logger('dev')); 
app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded({ extended: false })); 
app.use(cookieParser()); 

app.use('/', express.static(path.join(__dirname, 'public'))); 
app.use('/lists', lists); 

app.get('/lists/show', bodyParser.json(), function(req, res, next) { 
    console.log(req.body); 
}); 

Meine Ajax-Funktion (Anf_Daten ist {id: this.props.id}, wenn genannt):

export default function(reqData, path, method, onSuccess, onError, onComplete) { 
    let xhr = new XMLHttpRequest(); 
    xhr.onreadystatechange = function() { 
     if (xhr.readyState === XMLHttpRequest.DONE) { 
      if (xhr.status === 200) { 
       if(onSuccess) onSuccess(xhr.responseText != '' ? JSON.parse(xhr.responseText) : ''); 
      } else { 
       if(onError && xhr.responseText != '') { 
        let data = JSON.parse(xhr.responseText); 
        if(data.ExceptionMessage) onError(data.ExceptionMessage); 
       } 
      } 
     } 
    }; 
    let url = window.location.href.replace('#', '') + path; 
    xhr.open(method, url); 
    xhr.setRequestHeader('Content-Type', 'application/json'); 
    console.log(JSON.stringify(reqData)); 
    xhr.send(JSON.stringify(reqData)); 
    return xhr; 
} 

ich weiß, dass bodyParser funktioniert, weil die console.log in den Routenhandler druckt {} zum serverseitigen Konsole, was darauf hinweist, dass die req.body leer.

Ich habe versucht, ReqData in xhr.send mit und ohne JSON.stringify übergeben, beide haben nicht funktioniert. Aber der JSon druckt perfekt auf die Browserkonsole.

Ich bin völlig ratlos, wohin meine Anfrage geht. Verstehe ich grundsätzlich falsch, wie xhr.send und Express-Routen interagieren?

Answer 1

Ok, jetzt denke ich, ich weiß, wo das Problem ist - es ist die Methode, die Sie mit XHR verwenden:

xhr.open(method, url); 

Wenn Sie GET verwenden, haben Sie keinen Anfragetext. Wenn Sie POST verwenden, befindet sich der Handler irgendwo in ./routes/lists.

Angenommen, Sie tun nur console.log im bereitgestellten Snippet, verwenden Sie tatsächlich GET. Entsprechend Mozilla docs for XHR:

Die XMLHttpRequest.send() - Methode sendet die Anfrage. [...] send() akzeptiert ein optionales Argument für den Anfragetext. Wenn die Anforderungsmethode GET oder HEAD lautet, wird das Argument ignoriert und der Anfragetext wird auf null gesetzt.

Answer 2

Warum gehst du nicht versuchen, irgendeine Art von Ajax-Bibliothek zu verwenden, wie: https://github.com/yuanyan/react-ajax