it-swarm.com.de

Warum wird in meinem JavaScript die Fehlermeldung angezeigt, dass auf der angeforderten Ressource kein Header "Access-Control-Allow-Origin" vorhanden ist, wenn Postman dies nicht tut?

Ich versuche, die Autorisierung mithilfe von JavaScript durchzuführen, indem ich mich mit der RESTfulAPI built in Flask verbinde. Wenn ich jedoch die Anfrage stelle, erhalte ich folgende Fehlermeldung:

XMLHttpRequest kann http: // myApiUrl/login nicht laden. Auf der angeforderten Ressource ist kein Header "Access-Control-Allow-Origin" vorhanden. Origin 'null' hat daher keinen Zugriff.

Ich weiß, dass die API oder die Remote-Ressource den Header festlegen muss, aber warum hat es funktioniert, als ich die Anforderung über die Chrome-Erweiterung Postman stellte?

Dies ist der Anforderungscode:

$.ajax({
    type: "POST",
    dataType: 'text',
    url: api,
    username: 'user',
    password: 'pass',
    crossDomain : true,
    xhrFields: {
        withCredentials: true
    }
})
    .done(function( data ) {
        console.log("done");
    })
    .fail( function(xhr, textStatus, errorThrown) {
        alert(xhr.responseText);
        alert(textStatus);
    });
2059
Mr Jedi

Wenn ich es richtig verstanden habe, führen Sie eine XMLHttpRequest - Verbindung zu einer anderen Domain als Ihrer Seite aus. Der Browser blockiert ihn daher, da er aus Sicherheitsgründen normalerweise eine Anfrage in demselben Origin erlaubt. Sie müssen etwas anderes tun, wenn Sie eine domänenübergreifende Anforderung ausführen möchten. Ein Tutorial dazu ist Using CORS.

Wenn Sie Postbote verwenden, sind sie durch diese Richtlinie nicht eingeschränkt. Zitiert aus Cross-Origin XMLHttpRequest:

Normale Webseiten können das XMLHttpRequest-Objekt verwenden, um Daten von Remote-Servern zu senden und zu empfangen. Diese sind jedoch durch dieselbe Origin-Richtlinie eingeschränkt. Erweiterungen sind nicht so begrenzt. Eine Erweiterung kann mit Remote-Servern außerhalb von Origin kommunizieren, sofern sie zum ersten Mal Cross-Origin-Berechtigungen anfordert.

1124

Dies ist kein Fix für die Produktion oder wenn die Anwendung dem Client angezeigt werden muss. Dies ist nur hilfreich, wenn sich Benutzeroberfläche und Back-End Entwicklung auf unterschiedlichen Servern befinden und dies in der Produktion der Fall ist eigentlich auf demselben Server. Beispiel: Wenn Sie die Benutzeroberfläche für eine Anwendung entwickeln und diese lokal testen müssen, um sie auf den Back-End-Server zu verweisen, ist dies in diesem Szenario die perfekte Lösung. Für Produktionsfixes müssen CORS-Header zum Back-End-Server hinzugefügt werden, um den Zugriff auf Cross-Origin zu ermöglichen.

Der einfache Weg ist, einfach die Erweiterung in google chrome) hinzuzufügen, um den Zugriff mit CORS zu ermöglichen.

( https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en-US )

Aktivieren Sie diese Erweiterung einfach, wenn Sie den Zugriff auf keine 'Zugriffskontrolle-Erlauben-Ursprung' -Headeranforderung zulassen möchten.

oder

Fügen Sie unter Windows diesen Befehl in das Fenster run ein

chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

dadurch wird ein neuer chrome Browser geöffnet, der den Zugriff auf keine 'access-control-allow-Origin' Header-Anfrage erlaubt.

507
shruti

Wenn Sie im Gegenzug mit JSON umgehen können, versuchen Sie es mit JSONP (beachten Sie P am Ende), um zwischen Domänen zu sprechen:

$.ajax({
  type: "POST",
  dataType: 'jsonp',
  ...... etc ......

Erfahren Sie mehr über die Arbeit mit JSONP hier :

Das Aufkommen von JSONP - im Wesentlichen ein einvernehmlicher Cross-Site-Scripting-Hack - hat die Tür zu mächtigen Mashups von Inhalten geöffnet. Viele bekannte Websites bieten JSONP-Dienste an, mit denen Sie über eine vordefinierte API auf deren Inhalt zugreifen können.

322
Gavin

Es ist sehr einfach zu lösen, wenn Sie PHP verwenden. Fügen Sie einfach das folgende Skript am Anfang Ihrer PHP - Seite hinzu, auf der die Anforderung verarbeitet wird:

<?php header('Access-Control-Allow-Origin: *'); ?>

Warning: Dies enthält ein Sicherheitsproblem für Ihre PHP -Datei, das von Angreifern aufgerufen werden kann. Sie müssen Sitzungen und Cookies zur Authentifizierung verwenden, um Ihre Datei/Ihren Dienst gegen diesen Angriff zu verhindern. Ihr Service ist anfällig für Cross-Site Request Forgery (CSRF).

Wenn Sie Node-red verwenden, müssen Sie CORS in der node-red/settings.js-Datei zulassen, indem Sie die folgenden Zeilen auskommentieren:

// The following property can be used to configure cross-Origin resource sharing
// in the HTTP nodes.
// See https://github.com/troygoode/node-cors#configuration-options for
// details on its contents. The following is a basic permissive set of options:
httpNodeCors: {
 Origin: "*",
 methods: "GET,PUT,POST,DELETE"
},
200
shady sherif

Ich wünschte, jemand hätte diese Seite vor langer Zeit mit mir geteilt http://cors.io/ Es hätte eine Menge Zeit gespart, verglichen mit dem Aufbau und dem Vertrauen auf meine eigene Vertretung. Wenn Sie zur Produktion übergehen, ist es jedoch am besten, einen eigenen Proxy zu haben, da Sie immer noch alle Aspekte Ihrer Daten kontrollieren.

Alles was du brauchst:

https://cors.io/?http://HTTP_YOUR_LINK_HERE

168
yoshyosh

Wenn Sie Node.js verwenden, versuchen Sie es:

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

Weitere Informationen: CORS zu ExpressJS

67
Nguyen Tran

Es gibt ein domänenübergreifendes Problem bei der Verwendung von Ajax. Sie müssen sicherstellen, dass Sie auf Ihre Dateien über denselben http://-Pfad zugreifen, ohne dass www. (oder der Zugriff von http://www. und auf denselben Pfad einschließlich www.) erfolgt, den der Browser beim Zugriff über einen www.-Pfad als andere Domäne betrachtet ist. Sie veröffentlichen in einer anderen Domäne und der Browser blockiert den Fluss aufgrund des Origin-Problems.

Wenn das API nicht auf demselben Host liegt, von dem Sie anfordern, wird der Fluss blockiert und Sie müssen einen anderen Weg finden, um mit der API zu kommunizieren.

63
Alin Razvan

Weil 
$ .ajax ({type: "POST" - Ruft -OPTIONEN auf 
$ .post ( - Anrufe POST 

beide sind verschiedene Postman-Anrufe "POST" richtig, aber wenn wir sie aufrufen, wird es "OPTIONEN"

Für c # web services - webapi 

Fügen Sie den folgenden Code in Ihre Datei web.config unter dem Tag <system.webServer> ein. Das wird funktionieren

<httpProtocol>
    <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
    </customHeaders>
</httpProtocol>

Bitte stellen Sie sicher, dass Sie beim Ajax-Aufruf keinen Fehler machen

jQuery

$.ajax({
    url: 'http://mysite.Microsoft.sample.xyz.com/api/mycall',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    type: "POST", /* or type:"GET" or type:"PUT" */
    dataType: "json",
    data: {
    },
    success: function (result) {
        console.log(result);    
    },
    error: function () {
        console.log("error");
    }
});

Winkelausgabe 4 siehe: http://www.hubfly.com/blog/solutions/how-to-fix-angular-4-api-call-issues/

Hinweis: Wenn Sie nach dem Herunterladen von Inhalten von der Website eines Drittanbieters suchen, wird Ihnen dies nicht helfen. Sie können den folgenden Code ausprobieren, jedoch kein JavaScript.

System.Net.WebClient wc = new System.Net.WebClient();
string str = wc.DownloadString("http://mysite.Microsoft.sample.xyz.com/api/mycall");
48

Versuchen Sie XDomain ,

Zusammenfassung: Eine reine JavaScript CORS Alternative/Polyfill. Es ist keine Serverkonfiguration erforderlich. Fügen Sie der Domäne, mit der Sie kommunizieren möchten, einfach ein Proxy.html hinzu. Diese Bibliothek verwendet XHook, um alle XHR zu verknüpfen. XDomain sollte daher mit jeder Bibliothek zusammenarbeiten.

22
user3359786

Wenn du nicht willst:

  1. Deaktivieren Sie die Websicherheit in Chrome
  2. Verwenden Sie JSONP
  3. Verwenden Sie eine Website eines Drittanbieters, um Ihre Anforderungen umzuleiten

und Sie sind sicher, dass Ihr Server CORS aktiviert hat (testen Sie CORS hier: http://www.test-cors.org/ )

Dann müssen Sie den Origin-Parameter mit Ihrer Anfrage übergeben. Dieser Origin MUSS mit dem Origin übereinstimmen, den Ihr Browser mit Ihrer Anfrage sendet.

Sie können es hier in Aktion sehen: http://www.wikinomad.com/app/detail/Campgrounds/3591

Die Bearbeitungsfunktion sendet eine GET & POST -Anforderung an eine andere Domäne, um Daten abzurufen. Ich habe den Origin-Parameter gesetzt, der das Problem löst. Das Backend ist eine MediaWiki-Engine.

tldr: Fügen Sie Ihren Aufrufen den Parameter "Origin" hinzu. Dies muss der Origin-Parameter sein, den Ihr Browser sendet (Sie können den Origin-Parameter nicht fälschen)

11
Ganesh Krishnan

Ich hatte ein Problem damit, als ich mit AngularJS auf meine API zugegriffen habe. Dieselbe Anforderung funktionierte in SoapUI 5.0 und ColdFusion. Meine GET-Methode hatte bereits einen Access-Control-Allow-Origin-Header.

Ich habe herausgefunden, dass AngularJS eine "Trial" -Option anfordert . ColdFusion generiert standardmäßig die OPTIONS-Methode, diese enthält jedoch nicht viel. Der Fehler wurde als Antwort auf diesen Aufruf von OPTIONS generiert und nicht auf meinen beabsichtigten Aufruf von GET. Nachdem ich unten zu meiner API die OPTIONS-Methode hinzugefügt habe, wurde das Problem behoben.

<cffunction name="optionsMethod" access="remote" output="false" returntype="any" httpmethod="OPTIONS" description="Method to respond to AngularJS trial call">
    <cfheader name="Access-Control-Allow-Headers" value="Content-Type,x-requested-with,Authorization,Access-Control-Allow-Origin"> 
    <cfheader name="Access-Control-Allow-Methods" value="GET,OPTIONS">      
    <cfheader name="Access-Control-Allow-Origin" value="*">      
    <cfheader name="Access-Control-Max-Age" value="360">        
</cffunction>
8
Leonid Alzhin

Ich hatte die folgende Konfiguration, die beim Anfordern von Antworten vom Server zu demselben Fehler führte.

Serverseitig:SparkJava -> stellt die REST-API bereit
Client-Seite:ExtJs6 -> bietet Browser-Rendering 

Auf der Server-Seite musste ich der Antwort folgendes hinzufügen: 

Spark.get("/someRestCallToSpark", (req, res) -> {
    res.header("Access-Control-Allow-Origin", "*"); //important, otherwise its not working 
    return "some text";
 });

Auf der Client-Seite musste ich add dies zur Anfrage hinzufügen: 

Ext.Ajax.request({
    url: "http://localhost:4567/someRestCallToSpark",
    useDefaultXhrHeader: false, //important, otherwise its not working
    success: function(response, opts) {console.log("success")},
    failure: function(response, opts) {console.log("failure")}
});
8
kiltek

Basierend auf shrutis Antwort habe ich eine Verknüpfung des Chrome-Browsers mit den erforderlichen Argumenten erstellt: enter image description here enter image description here

8

https://github.com/Rob--W/cors-anywhere/ bietet (Node.js) Code, mit dem Sie Ihren eigenen CORS-Proxy einrichten und ausführen können. Es wird aktiv verwaltet und bietet eine Reihe von Funktionen zur Steuerung des Proxy-Verhaltens, die über das grundlegende Senden der richtigen Access-Control-*-Antwortheader hinausgehen.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS enthält Details, die erklären, wie Browser Cross-Origin-Anforderungen verarbeiten, die clientseitige Webanwendungen mit JavaScript erstellen, und welche Header Sie benötigen Konfigurieren Sie das Senden des Servers, an den die Anforderung gestellt wird, wenn Sie können.

In dem Fall, dass eine Site, an die Sie eine Anforderung stellen und eine Antwort von dieser erhalten müssen, den Access-Control-Allow-Origin-Antwortheader nicht zurückgibt, werden die Browser immer gesperrt, um Cross-Origin-Anforderungen zu blockieren, die direkt von Ihrem Client an sie gerichtet werden JavaScript-Code von der Arbeit. Wenn es sich bei der Site also nicht um eine Site handelt, für die Sie das Verhalten festlegen, kann will in diesem Fall nur die Anforderungen weiterleiten - entweder über Ihren eigenen Proxy, den Sie selbst ausführen, oder über einen offenen Proxy.

Wie in anderen Kommentaren erwähnt, gibt es gute Gründe, Ihren Anträgen nicht auf einen offenen Proxy zu vertrauen. Wenn Sie jedoch wissen, was Sie tun und entscheiden, dass ein offener Proxy für Ihre Anforderungen geeignet ist, ist https://cors-anywhere.herokuapp.com/ ein Dienst, der zuverlässig verfügbar ist, aktiv gewartet wird und ausgeführt wird eine Instanz des https://github.com/Rob--W/cors-anywhere/ -Codes.

Wie bei anderen hier erwähnten offenen Proxies (von denen einige zumindest nicht mehr verfügbar zu sein scheinen), besteht die Funktionsweise darin, dass der Clientcode nicht direkt eine Anforderung an den Client sendet, z. B. an http://foo.com, an den Sie ihn senden https://cors-anywhere.herokuapp.com/http://foo.com und der Proxy fügt der Antwort, die der Browser sieht, die erforderlichen Access-Control-*-Header hinzu.

7
sideshowbarker

Sie können das Problem umgehen, indem Sie YQL verwenden, um die Anforderung über die Server von Yahoo zu senden. Es sind nur ein paar Zeilen Code:

var yql_url = 'https://query.yahooapis.com/v1/public/yql';
var url = 'your api url';

$.ajax({
    'url': yql_url,
    'data': {
        'q': 'SELECT * FROM json WHERE url="'+url+'"',
        'format': 'json',
        'jsonCompat': 'new',
    },
    'dataType': 'jsonp',
    'success': function(response) {
        console.log(response);
    },
});

Hier der Link mit einer Erklärung: https://vverma.net/fetch-any-json-using-jsonp-and-yql.html

7
camnesia

Wenn Sie Entity Framework verwenden, scheint es, dass dieser Fehler manchmal ausgegeben wird, auch wenn Sie CORS aktiviert haben. Ich habe herausgefunden, dass der Fehler aufgrund einer fehlenden Finalisierung der Abfrage aufgetreten ist. Ich hoffe, das hilft anderen in derselben Situation.

Der folgende Code kann den XMLHttpRequest cannot load http://myApiUrl/login. No 'Access-Control-Allow-Origin' header is present on the requested resource.-Fehler auslösen:

using (DBContext db = new DBContext())
{
    return db.Customers.Select(x => new
    {
        Name = x.Name,
        CustomerId = x.CustomerId,
    });
}

Um dies zu beheben, ist ein Finalisierungsaufruf wie .ToList() oder .FirstOrDefault() am Ende der Abfrage erforderlich.

using (DBContext db = new DBContext())
{
    return db.Customers.Select(x => new
    {
        Name = x.Name,
        CustomerId = x.CustomerId,
    }).ToList();
}
5
Loyalar

In meinem Fall habe ich die JEE7 JAX-RS-Anwendung verwendet und die folgenden Tricks funktionierten perfekt für mich:

@GET
    @Path("{id}")
    public Response getEventData(@PathParam("id") String id) throws FileNotFoundException {
        InputStream inputStream = getClass().getClassLoader().getResourceAsStream("/eventdata/" + id + ".json");
        JsonReader jsonReader = Json.createReader(inputStream);
        return Response.ok(jsonReader.readObject()).header("Access-Control-Allow-Origin", "*").build();
    }
5
Bhuwan Gautam

Wenn Sie diese Fehlermeldung vom Browser erhalten:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '…' is therefore not allowed access

wenn Sie versuchen, eine Ajax-POST/GET-Anforderung an einen Remote-Server zu senden, der sich außerhalb Ihrer Kontrolle befindet, vergessen Sie bitte diesen einfachen Fix:

<?php header('Access-Control-Allow-Origin: *'); ?>

Sie benötigen wirklich, insbesondere wenn Sie nur für die Ajax-Anfrage JavaScript verwenden, einen internen Proxy, der Ihre Anfrage übernimmt und an den Remote-Server sendet.

Führen Sie zuerst in Ihrem JavaScript-Code einen Ajax-Aufruf an Ihren eigenen Server aus.

$.ajax({
    url: yourserver.com/controller/proxy.php,
    async: false,
    type: "POST",
    dataType: "json",
    data: data,
    success: function (result) {
        JSON.parse(result);
    },
    error: function (xhr, ajaxOptions, thrownError) {
        console.log(xhr);
    }
});

Erstellen Sie anschließend eine einfache PHP - Datei namens proxy.php, um Ihre POST - Daten einzuhüllen und als Parameter an den Remote-URL-Server anzuhängen. Ich gebe Ihnen ein Beispiel, wie ich dieses Problem mit der Expedia Hotelsuch-API umgehen kann:

if (isset($_POST)) {
  $apiKey = $_POST['apiKey'];
  $cid = $_POST['cid'];
  $minorRev = 99;

  $url = 'http://api.ean.com/ean-services/rs/hotel/v3/list?' . 'cid='. $cid . '&' . 'minorRev=' . $minorRev . '&' . 'apiKey=' . $apiKey;

  echo json_encode(file_get_contents($url));
 }

Indem Sie tun:

echo json_encode(file_get_contents($url));

Sie führen nur die gleiche Abfrage durch, aber auf der Serverseite und danach sollte es einwandfrei funktionieren.

Antwort kopiert und eingefügt aus NizarBsb

4
Flash

Ich konnte erfolgreich (in meinem Fall für Schriftarten) mit htaccess lösen, aber offensichtlich verlangt OP wenig anders. Sie können jedoch das FileMatch-Muster verwenden und jede Art von Erweiterung hinzufügen, damit kein Cros-Fehler auftritt.

<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>

https://httpd.Apache.org/docs/2.4/mod/core.html#filesmatch

4
Danish

Für die GoLang-API:

Zuerst können Sie unter MDN CORS Doc nachschauen, was CORS ist. Soweit ich weiß, geht es bei CORS darum, ob Origin Of Request auf Serverressourcen zugreifen darf oder nicht.

Sie können einschränken, welche Anforderung Origin auf den Server zugreifen kann, indem Sie Access-Control-Allow-Origin auf Header von Server Response setzen.

Das Festlegen des folgenden Headers in Server Response bedeutet beispielsweise, dass nur eine von http://foo.example gesendete Anforderung auf Ihren Server zugreifen kann:

Access-Control-Allow-Origin: http://foo.example

und folgende Erlaubnisanforderung, die von einem beliebigen Ursprung (oder einer Domäne) gesendet wurde:

Access-Control-Allow-Origin: *

Und wie ich in der Fehlermeldung weiß, bedeutet requested resource Ressource des Servers, also No 'Access-Control-Allow-Origin' header is present on the requested resource. bedeutet, dass Sie Access-Control-Allow-Origin Header in Ihrer Serverantwort nicht gesetzt haben, oder vielleicht nur den Ursprung von Anfrage ist nicht in Access-Control-Allow-Origin aufgelistet, daher ist der Zugriff nicht zulässig:

Auf der angeforderten Ressource ist kein Header "Access-Control-Allow-Origin" vorhanden. Origin 'null' hat daher keinen Zugriff.

In GoLang verwende ich gorilla/mux package, um den API-Server unter localhost:9091 zu erstellen, und ich erlaube CORS, indem Sie "Access-Control-Allow-Origin", "*" zum Header der Antwort hinzufügen:

func main() { // API Server Code
    router := mux.NewRouter()
    // API route is /people,
    //Methods("GET", "OPTIONS") means it support GET, OPTIONS
    router.HandleFunc("/people", GetPeople).Methods("GET", "OPTIONS")
    log.Fatal(http.ListenAndServe(":9091", router))
}

// Method of '/people' route
func GetPeople(w http.ResponseWriter, r *http.Request) {

    // Allow CORS by setting * in sever response
    w.Header().Set("Access-Control-Allow-Origin", "*")

    w.Header().Set("Access-Control-Allow-Headers", "Content-Type")
    json.NewEncoder(w).Encode("OKOK")
}

Und ich benutze JavaScript im Client. Bei localhost:9092 make request von Chrome kann erfolgreich "OKOK" vom Server localhost:9091 abgerufen werden.

function GetPeople() {
    try {
        var xhttp = new XMLHttpRequest();
        xhttp.open("GET", "http://localhost:9091/people", false);
        xhttp.setRequestHeader("Content-type", "text/html");
        xhttp.send();
        var response = JSON.parse(xhttp.response);
        alert(xhttp.response);
    }
    catch (error) {
        alert(error.message);
    }
}

Außerdem können Sie Ihren Request/Response-Header mit Tools wie Fiddler überprüfen.

4
yu yang Jian

Beliebte Frage - Eine andere Sache, die Sie sich ansehen sollten, wenn Sie bis hierher gelesen haben und nichts anderes hat geholfen Wenn Sie über ein CDN wie Akamai, Limelight oder ähnliches verfügen, möchten Sie möglicherweise den verfügbaren Cache-Schlüssel auf den URI der Ressource überprüfen. Wenn der Origin-Header-Wert nicht enthalten ist, geben Sie möglicherweise eine zwischengespeicherte Antwort zurück, wenn Sie von einem anderen Origin angefordert werden. Wir haben gerade einen halben Tag damit verbracht, das zu debuggen. Die CDN-Konfiguration wurde dahingehend aktualisiert, dass nur der Origin-Wert für einige ausgewählte Domänen, die uns gehören, enthalten ist, und der Wert für alle anderen auf Null gesetzt wurde. Dies scheint zu funktionieren und ermöglicht es Browsern unserer bekannten Domänen, unsere Ressourcen einzusehen. Sicherlich sind alle anderen Antworten Voraussetzung, um hierher zu gelangen, aber wenn das CDN der erste Sprung von Ihrem Browser ist, sollten Sie dies überprüfen. 

In unserem Fall konnten wir einige Anfragen sehen, die zu unserem Service führten, aber nicht annähernd das Volumen, das die Website sendete. Das hat uns auf das CDN hingewiesen. Wir konnten zurückgehen und sehen, dass die ursprüngliche Anforderung von einer direkten Anforderung geliefert wurde, nicht Teil eines Browseraufrufs AJAX und der Antwortheader Access-Control-Allow-Origin nicht enthalten war. Anscheinend hat das CDN diesen Wert zwischengespeichert. Der Akamai CDN-Konfigurations-Tweak, der den Origin-Anforderungsheaderwert als Teil des Matches berücksichtigt, scheint für uns funktioniert zu haben.

4
Jared

Oft passiert mir das von Javascript bis zu meiner PHP-API, aus einem der wenigen Gründe. Ich vergesse, die <?php header('Access-Control-Allow-Origin: *'); ? eins zu setzen. Dies ist hilfreich für den domänenübergreifenden Zugriff. Ein anderer Grund liegt darin, dass ich in der jQuery-Ajax-Anforderung einen bestimmten Datentyp spezifiziert und einen anderen Datentyp zurückgibt, sodass ein Fehler ausgegeben wird. 

Der letzte und prominenteste Grund für diesen Fehler ist, dass auf der von Ihnen angeforderten Seite ein Parser-Fehler vorliegt. Wenn Sie diese Seiten-URL in Ihrem Browser aufrufen, wird mehr als wahrscheinlich ein Fehler beim Analysieren angezeigt, und Sie haben eine Zeilennummer, um das Problem zu beheben. 

Ich hoffe das hilft jemandem. Ich habe jedes Mal eine Weile gebraucht, um das zu debuggen, und ich wünschte, ich hätte eine Checkliste mit den zu überprüfenden Dingen.

3

In jsonp request sollten Sie "jsonpCallback" fangen und ihn zurückschicken.

$.ajax({
      url: lnk,
      type: 'GET',
      crossDomain: true,
      dataType: 'jsonp',
      success: function (ip) { console.log(ip.ip); },
      error: function (err) { console.log(err) }
});

Auf der Backend-Seite (wenn Sie als Backend-PHP verwenden)

echo $_GET['callback'].'({"ip":"192.168.1.1"})';

In diesem Fall scheint die Backend-Antwort zu sein 

jQuery331009526199802841284_1533646326884 ({"ip": "192.168.1.1"})

sie können jedoch einen "jsonpCallback" manuell am Frontend einstellen und ihn auf der Backendseite fangen

$.ajax({
      url: lnk,
      type: 'GET',
      crossDomain: true,
      dataType: 'jsonp',
      jsonpCallback: 'get_ip',
      success: function (ip) { console.log(ip.ip); },
      error: function (err) { console.log(err) }
});

In diesem Fall scheint die Backend-Antwort zu sein 

get_ip ({"ip": "192.168.1.1"})

2
Alexey Kolotsey

Auf meiner Website (basierend auf .NET) habe ich gerade folgendes hinzugefügt:

<system.webServer>
 <httpProtocol>  
    <customHeaders>  
     <add name="Access-Control-Allow-Origin" value="*" />  
     <add name="Access-Control-Allow-Headers" value="Content-Type" />  
     <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />  
    </customHeaders>  
  </httpProtocol>         
</system.webServer>

Vielen Dank an dieses Video.

2
FrenkyB

falls Sie dies im Backend (in Flask) statt im Frontend beheben möchten, würde ich das Flask CORS Python-Paket uneingeschränkt empfehlen. Flask Cors

Mit einer einfachen Zeile in Ihrer app.py können Sie den Standard-Origin-Header automatisch einfügen oder ihn nach Bedarf anpassen.

2
Ben Watts

Der Vollständigkeit halber Apache erlaubt cors:

Header set Access-Control-Allow-Origin "http://www.allowonlyfromthisurl.com"
Header set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header set Access-Control-Max-Age "1000"
Header set Access-Control-Allow-Headers "x-requested-with, Content-Type, Accept-Encoding, Accept-Language, Cookie, Referer"
2
zak

CORS ist für Sie.

CORS ist "Cross Origin Resource Sharing" und ermöglicht das Senden einer domänenübergreifenden Anforderung. Jetzt unterstützen sowohl XMLHttpRequest2 als auch Fetch API CORS.

Aber es hat seine Grenzen. Der Server muss den Access-Control-Allow-Origin spezifisch beanspruchen und kann nicht auf '*' gesetzt werden.

Und wenn Sie möchten, dass ein Origin-Request an Sie gesendet werden kann, benötigen Sie JSONP (außerdem muss Access-Control-Allow-Origin gesetzt sein, kann jedoch '*' sein).

Für viele Anfragen, wenn Sie nicht wissen, was Sie wählen sollen, benötigen Sie dafür eine voll funktionsfähige Komponente. Lassen Sie mich eine einfache Komponente einführen catta


Wenn Sie einen modernen Browser verwenden (> Internet Explorer9, Chrome, Firefox, Edge usw.), wird dringend empfohlen, eine einfache, aber schöne Komponente zu verwenden: https://github.com/Joker-Jelly/catta. Es hat keine Abhängigkeiten, ist kleiner als 3 KB und unterstützt Fetch, Ajax und JSONP mit derselben unkomplizierten Syntax und Optionen.

catta('./data/simple.json').then(function (res) {
  console.log(res);
});

Es unterstützt auch den gesamten Import in Ihr Projekt, wie das ES6-Modul, CommonJS und sogar <script> in HTML.

2
Jelly

In den meisten dieser Antworten erfahren die Benutzer, wie sie einem Server, den sie steuern, CORS-Header hinzufügen.

Wenn Sie jedoch Daten von einem Server benötigen, auf dem Sie keine Kontrolle über eine Webseite haben, können Sie auf Ihrer Seite ein Skript-Tag erstellen, das src-Attribut auf den Endpunkt setzen, der keine CORS-Header enthält, und dann diese Daten laden auf die Seite:

window.handleData = function(data) {
  console.log(data)
};

var script = document.createElement('script');
script.setAttribute('src','https://some.api/without/cors/headers.com&callback=handleData');
document.body.appendChild(script);
2
duhaime

Ich habe diesen Fehler mit $http.get in Angular erhalten. Ich musste stattdessen$http.jsonpverwenden.

2
Travis Heeter

Vielleicht ist es ein bisschen kompliziert, aber Sie können einen Webserver verwenden, um die Anfrage weiterzuleiten. Mit nodejs haben Sie dieses Problem nicht. Ich bin kein Experte für Knoten js. Ich weiß also nicht, ob das sauberer Code ist. 

Aber das funktioniert für mich

Hier ist ein kleines Beispiel:

NODE JS

var rp = require('request-promise');
var express = require('express'),
    app = express(),
    port = process.env.PORT || 3000;
var options = {
    method: 'POST',
    uri: 'http://api.posttestserver.com/post',
    body: {
        some: 'payload'
    },
    json: true // Automatically stringifies the body to JSON
};
app.get('/', function (req, res) {
        rp(options)
        .then(function (parsedBody) {
            res.send(parsedBody)
        })
        .catch(function (err) {
            res.send(err)
        });
});
app.listen(port);

JS

axios.get("http://localhost:3000/").then((res)=>{
    console.log('================res====================');
    console.log(res);
    console.log('====================================');
})
1
KT Works

Wenn es sich bei Ihrem Server um eine Spring Boot-App handelt, fügen Sie diese Anmerkung oben in Ihren Rest-Controller ein - @CrossOrigin

Es sollte jetzt funktionieren. Vielen Dank

1
Maiden

Fügen Sie für den Ruby on Rails-Server in application_controller.rb Folgendes hinzu:

after_action :cors_set_access_control_headers

def cors_set_access_control_headers
  headers['Access-Control-Allow-Origin'] = '*'
  headers['Access-Control-Allow-Methods'] = 'POST, GET, OPTIONS'
  headers['Access-Control-Allow-Headers'] = '*'
end
1
张健健

Kein Header 'Access-Control-Allow-Origin' ist in der angeforderten Ressource vorhanden. Origin ' https://sx.xyz.com ' hat daher keinen Zugriff.

Ich hatte auch ein ähnliches Problem mit Cross Domain Data Exchange in der Ajax-Antwort als error undefined. Die Antwort im Header war jedoch Status Code: 200 OK

Failed to load https://www.Domain.in/index.php?route=api/synchronization/checkapikey:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'https://sx.xyz.in' is therefore not allowed access.

Die Lösung, um es zu umgehen: In meinem Fall war es, die Funktion checkapikey () über Ajax in eine andere Domäne aufzurufen und die Antwort mit den Daten zu erhalten, wohin der Aufruf erfolgt ist:

if (($this->request->server['REQUEST_METHOD'] == 'POST') && isset($this->request->server['HTTP_Origin'])) {

        $this->response->addHeader('Access-Control-Allow-Origin: ' . $this->request->server['HTTP_Origin']);
        $this->response->addHeader('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');
        $this->response->addHeader('Access-Control-Max-Age: 1000');
        $this->response->addHeader('Access-Control-Allow-Credentials: true');
        $this->response->addHeader('Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With');

        $headers = getallheaders();
...
}
1
Nishanth ॐ

Diese Lösung wird auf jeden Fall für Sie arbeiten. Benutzerdefiniertes Nachrichtenhandle hinzufügen

public class CustomHeaderHandler : DelegatingHandler
{
    protected override async Task<HttpResponseMessage> SendAsync(
            HttpRequestMessage request, CancellationToken cancellationToken)
    {
        HttpResponseMessage response = await base.SendAsync(request, cancellationToken);
        var referrer = request.Headers.Referrer;
        if (referrer != null && !response.Headers.Contains("Access-Control-Allow-Origin"))
        {
            response.Headers.Add("Access-Control-Allow-Origin", referrer.Scheme + "://" + referrer.Authority);
        }
        return response;
    }
}

Registrieren Sie sich in webapiconfig.cs.

config.MessageHandlers.Add (neues CustomHeaderHandler ());

Wenn Sie SignalR verwenden, fügen Sie diesen Code in die Datei globle.asax.cs ein

protected void Application_BeginRequest(object sender, EventArgs e)
        {
            var referrer = Request.UrlReferrer;
            if (Context.Request.Path.Contains("signalr/") && referrer != null)
            {
                Context.Response.AppendHeader("Access-Control-Allow-Origin", referrer.Scheme + "://" + referrer.Authority);
            }
        }
1
Ujjwal

Für Opera (es funktioniert genauso wie Chrome), habe ich den Browser mit diesem Befehl gestartet:

opera --user-data-dir="~/Downloads/opera-session" --disable-web-security

Das Problem ist gelöst! Jetzt kann ich an einer lokalen HTML-Datei (auf meinem Festplattenlaufwerk) arbeiten und Ajax-Anforderungen für Remote-Herkunft in derselben Datei aufrufen.

Hinweis 1: Sie können jeden Ordner in Ihrem Heimatverzeichnis als --user-data-dir angeben.

Anmerkung 2: Getestet an Debian 8 (Jessie)/Opera 39

 Here is a screenshot

Wenn Sie normal starten (ohne die oben genannten Parameter), fällt dieselbe Anforderung in den Fehlercodeblock.

0
csonuryilmaz

Möglicherweise können Sie die Ressource vom Produktionsserver auf den Entwicklungsserver kopieren und die URL der Ressource dynamisch anpassen. Auf diese Weise würden Sie immer aus dem gleichen Ursprung lesen, wodurch die Ursprungsüberschreitung von Origin eliminiert wird.

0
bachstein

In meinem Fall, in dem ich Spring Boot als Dienst verwendet habe, können Sie eine Cross-Origin-Anmerkung zum verantwortlichen Vorgang hinzufügen.

@CrossOrigin(origins = "http://localhost:4200")
@RequestMapping(value = "getFoo", method = RequestMethod.GET)
public ResponseEntity getFoo(){
    // do something
} 
0
Chandan Kumar

Ich habe eine einfache Brücke in meiner eigenen Domäne erstellt, die den Inhalt von einer externen Domäne abruft und anzeigt.

<?php
header("Content-Type: text/plain");
if (isset($_GET["cnic"]))
{
    $page = file_get_contents("https://external.domain.com/api/verify/" . $_GET["cnic"]);
    echo $page;
}
else
{
    echo "";
}

?>

Anstatt auf die externe Domäne in AJAX zuzugreifen, habe ich die URL dieser Bridge-Datei eingefügt.

Sie sollten den Content-Type an Ihre Bedürfnisse anpassen. Wenn die Daten in JSON sind, verwenden Sie header("Content-Type: application/json");.

0
Muhammad Saqib

Um nur eine andere Art zu erwähnen, "es zu umgehen" - AJAX -Proxy. Senden Sie eine Anfrage an Ihren Server, um die Daten von einem anderen Origin abzurufen, und senden Sie die Anfrage an Sie zurück.

Ich ziehe diesen Ansatz dem JSONP vor, da er einige potenzielle Sicherheitsprobleme hat.

0
carobnodrvo

Ich habe dies behoben, indem CORS für die Client-URL aktiviert wurde, die auf die Web-API zugreift, und es funktionierte erfolgreich.

Zum Beispiel:

[EnableCors(origins: "http://clientaccessingapi.com", headers: "*", methods: "*")]
0
Rizwan ali