it-swarm.com.de

Origin <Origin> ist für 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 las über domänenübergreifende Ajax-Anforderungen und verstehe das zugrunde liegende Sicherheitsproblem. In meinem Fall laufen 2 Server lokal und ermöglichen es, domänenübergreifende Anforderungen während des Tests zu aktivieren.

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

Ich sende eine Ajax-Anforderung an localhost:8080 - GAE server, während meine Seite vom Knotenserver geladen wird. Was ist das Einfachste und Sicherste (Ich möchte nicht mit der Option disable-web-security starten). Wenn ich 'Content-Type' ändern muss, sollte ich das auf dem Knotenserver tun? Wie?

114
bsr

Da sie auf verschiedenen Ports laufen, unterscheiden sie sich in JavaScript Origin. Es spielt keine Rolle, dass sie sich auf demselben Rechner/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 lediglich einen HTTP-Header zum Server hinzufügen:

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

Oder der Einfachheit halber:

Access-Control-Allow-Origin: *
129
Rocket Hazmat

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

wenn Ihre App mit einfachen node.js erstellt wurde

setzen Sie es in Ihre Antwortheader wie

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. How-to-Erlaubnis-Cors-in-Express-nodejs
  2. Eintauchen in-node-js-very-first-app #siehe den Ajax-Abschnitt
42
mithunsatheesh

Wenn Sie in Chrome eine schnelle Umgehung für Ajax-Anforderungen benötigen, können Sie mit diesem Chrome-Plugin automatisch auf jede Website zugreifen, indem Sie den richtigen Antwortheader hinzufügen

Chrome-Erweiterung Erlauben-Steuern-Zulassen-Ursprung: *

41
Billy Baker

Ich akzeptiere die Antwort von @Rocket hazmat, da sie mich zur Lösung führt. Es war tatsächlich auf dem GAE-Server, dass ich den Header setzen musste. Ich musste diese einstellen

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

nur die Einstellung "Access-Control-Allow-Origin" gab einen Fehler aus

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

Wenn ein Auth-Token gesendet werden muss, fügen Sie auch dieses hinzu

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

Stellen Sie am Client außerdem withCredentials ein.

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

6
bsr

Ich hatte ein Problem, als ich die Cross-Origin-Ressource mit Ajax von Chrome aus anrief.

Ich habe Knoten js und lokalen http-Server verwendet, um meine Knoten-js-App bereitzustellen.

Ich habe eine Fehlerantwort erhalten, als ich auf die Origin-Ressource zugreifen konnte

Ich habe eine Lösung 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;
});
3
Chaitanya
In router.js just add code before calling get/post methods. It works for me without errors.

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

Wenn Sie Express verwenden, können Sie 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 Importe 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();
});
1
Ryan Cocuzzo

Wenn Sie danach 403 erhalten haben, reduzieren Sie 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>
1
Farbod Aprin

Ich habe endlich die Antwort für Apache Tomcat8 bekommen

Sie müssen die Tomcat-Datei web.xml bearbeiten.

wahrscheinlich wird es in 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>

Dadurch werden Access-Control-Allow-Origin für alle Hosts zugelassen. Wenn Sie es von allen Hosts nur auf Ihren Host ändern müssen, können Sie die

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

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

sie können hier verweisen Tomcat-Filterdokumentation

Vielen Dank

1
Shinto Joseph

verwenden Sie dataType: 'jsonp', funktioniert für mich. 

   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               
0
hoogw

Verwenden Sie diese Option 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");
0
Hamza Waleed