Express.js Post-Anfrage "Herkunft Null ist nicht zulässig" Fehler

Question

Ich versuche, eine JSON-Daten, die eine Reihe von Schlüssel und Werte von JavaScript zu Express.JS enthält. Ich habe die Kors Verwendung hinzugefügt, wie von anderen Post vorgeschlagen, und auch res.header("Access-Control-Allow-Origin", "*");.
Als ich die POST-Anfrage von der Chrome Postman App getestet habe, funktionierte es einwandfrei. Aber wenn ich die Anfrage durch einen lokalen Test Web-Seite über Chrome-Browser gesendet wird, die Konsole ausgibt
XMLHttpRequest cannot load http://localhost:8080/submit_project_request. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 400.

Mein Code für Express.js:

var http = require("http"); 
var express = require("express"); 
var xmlbuilder = require("xmlbuilder"); 
var bodyParser = require("body-parser"); 
var cors = require("cors"); 

var app = express(); 
app.use(cors()); 
var port = process.env.PORT || 8080; 

app.use(bodyParser.urlencoded({ 
    extended: true 
})); 

app.use(bodyParser.json()); 

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.get('/submit_project_request', function (req, res) { 
    var client_org = req.parm("client_org"); 
}); 

app.post('/submit_project_request', function (req, res, next) { 
    res.header("Access-Control-Allow-Origin", "*"); 
    res.header("Access-Control-Allow-Headers", "X-Requested-With"); 
    next(); 
    console.log(req.body.client_org); 
    res.contentType("text"); 
    res.send("data received"); 
}); 

app.listen(8080); 

Bitte fühlen Sie sich frei, jede Verbesserung vorzuschlagen.

Answer 1

Es scheint, dass Sie die Datei: // verwenden, um Ihre Webseite zu öffnen. Verwenden Sie einen Server, um Ihre HTML-Seite zu bedienen, so dass Sie etwas wie localhost sehen: 8000/yourpage.html

Auch benötigen Sie nicht die folgende Middleware (wenn Sie das Cors-Modul dann konfigurieren möchten, verwenden Sie die Optionen Objekt wie app.use(cors(options)) siehe Optionen here):

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

auch Sie können die folgenden von Ihrem submit_project_request Route entfernen:

res.header("Access-Control-Allow-Origin", "*"); 
    res.header("Access-Control-Allow-Headers", "X-Requested-With"); 
    next(); 

Aufruf next() wie dies wird nicht empfohlen. In Ihrem Code bedeutet es im Wesentlichen eine 404 hier zu senden. Wenn Sie das tun wollen, dann verwenden Sie return next();