Ich versuche, AngularJS für die Kommunikation mit einer Cross-Origin-Ressource einzurichten, bei der sich der Asset-Host, der meine Vorlagendateien bereitstellt, in einer anderen Domäne befindet. Daher muss die von Angular ausgeführte XHR-Anforderung domänenübergreifend sein. Ich habe meinem Server den entsprechenden CORS-Header für die HTTP-Anforderung hinzugefügt, damit dies funktioniert, aber es scheint nicht zu funktionieren. Das Problem ist, dass beim Überprüfen der HTTP-Anforderungen in meinem Browser (Chrome) die an die Asset-Datei gesendete Anforderung eine OPTIONS-Anforderung ist (es sollte sich um eine GET-Anforderung handeln).
Ich bin nicht sicher, ob dies ein Fehler in AngularJS ist oder ob ich etwas konfigurieren muss. Soweit ich weiß, kann der XHR-Wrapper keine OPTIONS-HTTP-Anforderung stellen. Es sieht also so aus, als würde der Browser versuchen, herauszufinden, ob das Asset zuerst heruntergeladen werden darf, bevor er die GET-Anforderung ausführt. Wenn dies der Fall ist, muss ich dann den CORS-Header (Access-Control-Allow-Origin: http://asset.host ... ) auch mit dem Asset-Host festlegen ?
quelle
$resource
POST- Anforderung eine OPTIONS- Anforderung an meinen Backend-ExpressJS-Server generiert (auf demselben Host, aber an einem anderen Port).Für Angular 1.2.0rc1 + müssen Sie eine resourceUrlWhitelist hinzufügen.
1.2: Release-Version Sie haben eine EscapeForRegexp-Funktion hinzugefügt, damit Sie nicht länger den Strings entkommen müssen. Sie können die URL einfach direkt hinzufügen
Stellen Sie sicher, dass Sie ** für Unterordner hinzufügen. Hier ist ein funktionierender jsbin für 1.2: http://jsbin.com/olavok/145/edit
1.2.0rc: Wenn Sie noch eine RC-Version haben, sieht die Lösung Angular 1.2.0rc1 folgendermaßen aus:
Hier ist ein jsbin-Beispiel, in dem es für 1.2.0rc1 funktioniert: http://jsbin.com/olavok/144/edit
Pre 1.2: Für ältere Versionen (siehe http://better-inter.net/enabling-cors-in-angular-js/ ) müssen Sie Ihrer Konfiguration die folgenden 2 Zeilen hinzufügen:
Hier ist ein jsbin-Beispiel, in dem es für Versionen vor 1.2 funktioniert: http://jsbin.com/olavok/11/edit
quelle
HINWEIS: Nicht sicher, ob es mit der neuesten Version von Angular funktioniert.
ORIGINAL:
Es ist auch möglich, die OPTIONS-Anforderung zu überschreiben (wurde nur in Chrome getestet):
quelle
$resource('http://yourserver/yourentity/:id', {}, {query: {method: 'GET'});
Ihr Dienst muss eine
OPTIONS
Anfrage mit folgenden Überschriften beantworten :Hier ist ein gutes Dokument: http://www.html5rocks.com/de/tutorials/cors/#toc-adding-cors-support-to-the-server
quelle
Das gleiche Dokument sagt
Im Gegensatz zu einfachen Anforderungen (siehe oben) senden "Preflighted" -Anforderungen zuerst einen HTTP OPTIONS-Anforderungsheader an die Ressource in der anderen Domäne, um festzustellen, ob die tatsächliche Anforderung sicher zu senden ist. Standortübergreifende Anforderungen werden auf diese Weise vorab ausgeführt, da sie Auswirkungen auf Benutzerdaten haben können. Insbesondere wird eine Anfrage vorab geflogen, wenn:
Wenn die ursprüngliche Anforderung Get ohne benutzerdefinierte Header lautet, sollte der Browser keine Optionsanforderung stellen, wie dies jetzt der Fall ist. Das Problem ist, dass ein Header X-Requested-With generiert wird, der die Optionsanforderung erzwingt. Informationen zum Entfernen dieses Headers finden Sie unter https://github.com/angular/angular.js/pull/1454
quelle
Dies hat mein Problem behoben:
quelle
Wenn Sie einen NodeJS-Server verwenden, können Sie diese Bibliothek verwenden. Für mich hat dies problemlos funktioniert: https://github.com/expressjs/cors
und nachdem du ein machen kannst
npm update
.quelle
Hier ist die Art und Weise, wie ich dieses Problem in ASP.NET behoben habe
Zunächst sollten Sie das Nuget-Paket Microsoft.AspNet.WebApi.Cors hinzufügen
Ändern Sie dann die Datei App_Start \ WebApiConfig.cs
Fügen Sie dieses Attribut Ihrer Controller-Klasse hinzu
Auf diese Weise konnte ich json zur Aktion schicken
Referenz: Aktivieren von Cross-Origin-Anforderungen in ASP.NET Web API 2
quelle
Irgendwie habe ich es durch Ändern behoben
zu
quelle
Perfekt beschrieben in pkozlowskis Kommentar. Ich hatte eine funktionierende Lösung mit AngularJS 1.2.6 und ASP.NET Web Api, aber als ich AngularJS auf 1.3.3 aktualisiert hatte, schlugen Anforderungen fehl.
Die Lösung für den Web-API-Server bestand darin, die Behandlung der OPTIONS-Anforderungen zu Beginn der Konfigurationsmethode hinzuzufügen (weitere Informationen in diesem Blog-Beitrag ):
quelle
Wenn Sie Jersey für REST-APIs verwenden, können Sie wie folgt vorgehen
Sie müssen Ihre Webservices-Implementierung nicht ändern.
Ich werde für Jersey 2.x erklären
1) Fügen Sie zuerst einen ResponseFilter hinzu, wie unten gezeigt
2) Fügen Sie dann in der Datei web.xml in der Trikot-Servlet-Deklaration Folgendes hinzu
quelle
Ich habe es aufgegeben, dieses Problem zu beheben.
Meine IIS web.config enthielt das relevante "
Access-Control-Allow-Methods
". Ich habe versucht, meinem Angular-Code Konfigurationseinstellungen hinzuzufügen, aber nachdem ich einige Stunden gebrannt hatte, um Chrome dazu zu bringen, einen domänenübergreifenden JSON-Webdienst aufzurufen, gab ich kläglich auf.Am Ende habe ich eine blöde ASP.Net-Handler-Webseite hinzugefügt, diese dazu gebracht, meinen JSON-Webdienst aufzurufen und die Ergebnisse zurückzugeben. Es war in 2 Minuten betriebsbereit.
Hier ist der Code, den ich verwendet habe:
Und in meinem Angular Controller ...
Ich bin sicher, es gibt einen einfacheren / allgemeineren Weg, dies zu tun, aber das Leben ist zu kurz ...
Das hat bei mir funktioniert und ich kann jetzt mit der normalen Arbeit weitermachen !!
quelle
Für ein IIS MVC 5 / Angular CLI-Projekt (Ja, ich bin mir bewusst, dass Ihr Problem bei Angular JS liegt) mit API habe ich Folgendes getan:
web.config unter
<system.webServer>
Knotenglobal.asax.cs
Das sollte Ihre Probleme sowohl für MVC als auch für WebAPI beheben, ohne dass alle anderen herumlaufen müssen. Ich habe dann einen HttpInterceptor im Angular CLI-Projekt erstellt, der automatisch die entsprechenden Header-Informationen hinzufügte. Hoffe das hilft jemandem in einer ähnlichen Situation.
quelle
Wenig spät zur Party,
Wenn Sie Angular 7 (oder 5/6/7) und PHP als API verwenden und dieser Fehler weiterhin angezeigt wird, versuchen Sie, dem Endpunkt (PHP-API) die folgenden Header-Optionen hinzuzufügen.
Hinweis : Was nur benötigt wird, ist
Access-Control-Allow-Methods
. Aber ich füge hier zwei weitere einAccess-Control-Allow-Origin
undAccess-Control-Allow-Headers
einfach, weil Sie alle diese Einstellungen richtig vornehmen müssen, damit Angular App ordnungsgemäß mit Ihrer API kommunizieren kann.Hoffe das hilft jemandem.
Prost.
quelle