Origin <origin> ist von Access-Control-Allow-Origin nicht zulässig

XMLHttpRequest cannot load http://localhost:8080/api/test. Origin http://localhost:3000 is not allowed by Access-Control-Allow-Origin. 

Ich habe über domänenübergreifende Ajax-Anfragen gelesen und verstehe das zugrunde liegende Sicherheitsproblem. In meinem Fall werden 2 Server lokal ausgeführt und möchten domänenübergreifende Anforderungen während des Testens aktivieren.

localhost:8080 - Google Appengine dev server
localhost:3000 - Node.js server

Ich stelle eine Ajax-Anfrage an, localhost:8080 - GAE serverwährend meine Seite vom Knotenserver geladen wird. Was ist das einfachste und sicherste (Sie möchten Chrome nicht mit der disable-web-securityOption starten ). Wenn ich mich ändern muss 'Content-Type', sollte ich es auf dem Knotenserver tun? Wie?

Da sie auf verschiedenen Ports ausgeführt werden, handelt es sich um unterschiedliches JavaScript origin. Es spielt keine Rolle, dass sie sich auf demselben Computer / Hostnamen befinden.

Sie müssen CORS auf dem Server aktivieren (localhost: 8080). Schauen Sie sich diese Seite an: http://enable-cors.org/

Sie müssen dem Server lediglich einen HTTP-Header hinzufügen:

Access-Control-Allow-Origin: http://localhost:3000

Oder der Einfachheit halber:

Access-Control-Allow-Origin: *

Denken Sie, verwenden Sie nicht "*", wenn Ihr Server versucht, ein Cookie zu setzen, und Sie verwenden withCredentials = true

Bei der Beantwortung einer Anfrage mit Anmeldeinformationen muss der Server eine Domäne angeben und kann kein Platzhalterzeichen verwenden.

Sie können mehr über lesen withCredentialshier

Wenn Sie für Ajax-Anfragen eine schnelle Lösung in Chrome benötigen, können Sie mit diesem Chrome-Plugin automatisch von jeder Quelle aus auf jede Site zugreifen, indem Sie den richtigen Antwortheader hinzufügen

Chrome-Erweiterung Allow-Control-Allow-Origin: *

Sie müssen CORS aktivieren, um dies zu lösen

wenn Ihre App mit einfachen node.js erstellt wurde

Stellen Sie es in Ihren Antwortheadern wie ein

var http = require('http');

http.createServer(function (request, response) {
response.writeHead(200, {
    'Content-Type': 'text/plain',
    'Access-Control-Allow-Origin' : '*',
    'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE'
});
response.end('Hello World\n');
}).listen(3000);

wenn Ihre App mit Express-Framework erstellt wurde

Verwenden Sie eine CORS-Middleware wie

var allowCrossDomain = function(req, res, next) {
    res.header('Access-Control-Allow-Origin', "*");
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    next();
}

und bewerben Sie sich über

app.configure(function() {
    app.use(allowCrossDomain);
    //some other code
});    

Hier sind zwei Referenzlinks

1. wie-man-cors-in-express-nodejs zulässt
2. Eintauchen in den Knoten js-allererste-App #Siehe den Abschnitt Ajax

Ich akzeptiere die Antwort von @Rocket Hazmat, da sie mich zur Lösung führt. Es war in der Tat auf dem GAE-Server, den ich brauchte, um den Header zu setzen. Ich musste diese einstellen

"Access-Control-Allow-Origin" -> "*"
"Access-Control-Allow-Headers" -> "Origin, X-Requested-With, Content-Type, Accept"

Einstellung "Access-Control-Allow-Origin" gab nur Fehler

Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers.

Wenn ein Authentifizierungstoken gesendet werden muss, fügen Sie dies ebenfalls hinzu

"Access-Control-Allow-Credentials" -> "true"

Auch beim Kunden einstellen withCredentials

Dadurch werden 2 Anforderungen an den Server gesendet, eine mit OPTIONS. Auth-Cookie wird nicht mitgesendet, daher muss außerhalb von auth behandelt werden.

Fügen Sie in router.js einfach Code hinzu, bevor Sie get / post-Methoden aufrufen. Es funktioniert bei mir ohne Fehler.

//Importing modules @Brahmmeswar
const express = require('express');
const router = express.Router();

const Contact = require('../models/contacts');

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

Ich hatte ein Problem beim Aufrufen einer Cross-Origin-Ressource mit Ajax aus Chrome.

Ich habe Node JS und den lokalen HTTP-Server verwendet, um meine Node JS-App bereitzustellen.

Ich habe eine Fehlerantwort erhalten, als ich auf eine Cross-Origin-Ressource zugegriffen habe

Ich habe eine Lösung dafür gefunden,

1) Ich habe meiner app.js-Datei folgenden Code hinzugefügt

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

2) In meiner HTML-Seite namens Cross-Origin-Ressource mit $.getJSON();

$.getJSON("http://localhost:3000/users", function (data) {
    alert("*******Success*********");
    var response=JSON.stringify(data);
    alert("success="+response);
    document.getElementById("employeeDetails").value=response;
});

Wenn Sie Express verwenden, können Sie die cors-Middleware wie folgt verwenden:

var express = require('express')
var cors = require('cors')
var app = express()

app.use(cors())

Fügen Sie dies Ihrem NodeJS-Server unter den folgenden Importen hinzu:

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

Wenn Sie danach 403 erhalten haben, reduzieren Sie bitte die Filter in der WEB.XML-Tomcat-Konfiguration auf Folgendes:

<filter>
  <filter-name>CorsFilter</filter-name>
  <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
  <init-param>
    <param-name>cors.allowed.origins</param-name>
    <param-value>*</param-value>
  </init-param>
  <init-param>
    <param-name>cors.allowed.methods</param-name>
    <param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
  </init-param>
  <init-param>
    <param-name>cors.allowed.headers</param-name>
    <param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
  </init-param>
  <init-param>
    <param-name>cors.exposed.headers</param-name>
    <param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value>
  </init-param>
</filter>

Ich habe endlich die Antwort für Apache Tomcat8 bekommen

Sie müssen die Datei tomcat web.xml bearbeiten.

wahrscheinlich wird es im webapps Ordner sein,

sudo gedit /opt/tomcat/webapps/your_directory/WEB-INF/web.xml

finde es und bearbeite es

<web-app>


<filter>
  <filter-name>CorsFilter</filter-name>
  <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
  <init-param>
    <param-name>cors.allowed.origins</param-name>
    <param-value>*</param-value>
  </init-param>
  <init-param>
    <param-name>cors.allowed.methods</param-name>
    <param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
  </init-param>
  <init-param>
    <param-name>cors.allowed.headers</param-name>
    <param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
  </init-param>
  <init-param>
    <param-name>cors.exposed.headers</param-name>
    <param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value>
  </init-param>
  <init-param>
    <param-name>cors.support.credentials</param-name>
    <param-value>true</param-value>
  </init-param>
  <init-param>
    <param-name>cors.preflight.maxage</param-name>
    <param-value>10</param-value>
  </init-param>
</filter>


<filter-mapping>
  <filter-name>CorsFilter</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>



</web-app>

Dies ermöglicht Access-Control-Allow-Origin allen Hosts. Wenn Sie es von allen Hosts auf nur Ihren Host ändern müssen, können Sie das bearbeiten

<param-name>cors.allowed.origins</param-name>
<param-value>http://localhost:3000</param-value>

obiger Code von * zu Ihrem http: // your_public_IP oder http://www.example.com

Sie können hier auf die Dokumentation zum Tomcat-Filter verweisen

Vielen Dank

Hallo, dies ist der Weg, um das CORS-Problem im Knoten zu lösen. Fügen Sie einfach diese Zeilen auf der Seite "api" des Servers in Node.js (oder in Ihrer Server-Datei) hinzu, bevor Sie sicherstellen, dass "cors" installiert wird.

    const express = require('express');
    const app = express();
    app.use(express.json());
    var cors = require('cors');
    app.use(cors());

benutze dataType: 'jsonp', funktioniert bei mir.

   async function get_ajax_data(){

       var _reprojected_lat_lng = await $.ajax({

                                type: 'GET',

                                dataType: 'jsonp',

                                data: {},

                                url: _reprojection_url,

                                error: function (jqXHR, textStatus, errorThrown) {

                                    console.log(jqXHR)

                                },

                                success: function (data) {

                                    console.log(data);



                                    // note: data is already json type, you just specify dataType: jsonp

                                    return data;

                                }

                            });





 } // function               

Verwenden Sie dies für PHP, um Header festzulegen.

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: PUT, GET, POST");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");

router.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Methods", "*");
res.header("Access-Control-Allow-Headers", "*");
next();});

Fügen Sie dies zu Ihren Routen hinzu, die Sie vom Front-End aus anrufen. Wenn Sie beispielsweise http: // localhost: 3000 / users / register aufrufen , müssen Sie dieses Codefragment in Ihre Back-End-JS-Datei einfügen, die diese Route enthält.

Wenn Sie nach der Lösung suchen und Express hier verwenden, ist dies die schnelle Lösung.

const express = require('express')
const cors = require('cors')
const app = express()

1) Installieren Sie cors mit npm npm install cors --save

2) importiere es [erforderlich] const cors = require('cors')

3) Verwenden Sie es als Middleware app.use(cors())

Einzelheiten und Verwendung von Cors . Das ist es, hoffentlich funktioniert es.

Wenn Sie sich in Google Chrome befinden, installieren Sie dieses Add-On:

https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi/related