Ich habe eine Demo mit JavaScript für die Flickr-Fotosuch-API erstellt. Jetzt konvertiere ich es in die AngularJs. Ich habe im Internet gesucht und unten Konfiguration gefunden.
Aufbau:
myApp.config(function($httpProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
});
Bedienung:
myApp.service('dataService', function($http) {
delete $http.defaults.headers.common['X-Requested-With'];
this.flickrPhotoSearch = function() {
return $http({
method: 'GET',
url: 'http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=3f807259749363aaa29c76012fa93945&tags=india&format=json&callback=?',
dataType: 'jsonp',
headers: {'Authorization': 'Token token=xxxxYYYYZzzz'}
});
}
});
Regler:
myApp.controller('flickrController', function($scope, dataService) {
$scope.data = null;
dataService.flickrPhotoSearch().then(function(dataResponse) {
$scope.data = dataResponse;
console.log($scope.data);
});
});
Trotzdem habe ich den gleichen Fehler bekommen. Hier sind einige Links, die ich ausprobiert habe:
XMLHttpRequest kann keine URL laden. Ursprung von Access-Control-Allow-Origin nicht erlaubt
javascript
angularjs
xmlhttprequest
cors
ankitr
quelle
quelle
Antworten:
Das tust du nicht. Der Server, an den Sie die Anfrage stellen, muss CORS implementieren, um JavaScript von Ihrem Website-Zugriff aus zu gewähren. Ihr JavaScript kann sich keine Berechtigung zum Zugriff auf eine andere Website erteilen.
quelle
https://www.google.com
mit einer Anwendung wie POSTMAN, aber wenn ich versuche,GET
aushttps://www.google.com
mit einem AJAX - Aufruf ich die CORS Fehlermeldung erhalten? Kann ich den AJAX-Anruf auf keinen Fall ähnlich wie den Anruf von POSTMAN verhalten?Ich hatte ein ähnliches Problem und für mich lief es darauf hinaus, die folgenden HTTP-Header bei der Antwort des empfangenden Endes hinzuzufügen :
Möglicherweise möchten Sie das
*
am Ende nicht verwenden, sondern nur den Domänennamen des Hosts, der die Daten sendet. Mögen*.example.com
Dies ist jedoch nur möglich, wenn Sie Zugriff auf die Konfiguration des Servers haben.
quelle
header('Access-Control-Allow-Origin: *');
Http.get()
oder ähnlichem aufrufen , fügen Sie esheader('Access-Control-Allow-Origin: *')
als allererste Ausgabe in das aufgerufene PHP-Skript ein (dh bevor Sie die eigentliche Antwort JSON ausgeben, was auch immer.Verwenden Sie den Ressourcendienst, um flickr jsonp zu verwenden:
Vorlage:
quelle
Dieses Problem tritt auf, weil der Web Application Security Modellpolitik , die ist Same Origin Policy Im Rahmen der Politik, einen Web - Browser ermöglicht Skripte in einer ersten Web - Seite den Zugriff auf Daten in einer zweiten Web - Seite enthalten ist , aber nur , wenn beide Seiten den gleichen Ursprung haben . Dies bedeutet, dass der Anforderer mit dem genauen Host, Protokoll und Port des anfordernden Standorts übereinstimmen muss.
Wir haben mehrere Möglichkeiten, um dieses CORS-Header-Problem zu lösen.
Verwenden von Proxy - In dieser Lösung führen wir einen Proxy so aus, dass die Anfrage, wenn sie über den Proxy gesendet wird, so aussieht, als ob sie denselben Ursprung hat. Wenn Sie den NodeJS verwenden , können Sie Cors -Anywhere verwenden , um die Proxy- Aufgaben zu erledigen. https://www.npmjs.com/package/cors-anywhere .
Beispiel : -
JSONP - JSONP ist eine Methode zum Senden von JSON-Daten, ohne sich um domänenübergreifende Probleme kümmern zu müssen. Das XMLHttpRequest-Objekt wird nicht verwendet. Stattdessen wird das
<script>
Tag verwendet. https://www.w3schools.com/js/js_json_jsonp.aspServerseite - Auf der Serverseite müssen wir Cross-Origin-Anforderungen aktivieren. Zuerst erhalten wir die Preflighted-Anfragen (OPTIONEN) und müssen die Anfrage mit dem Statuscode 200 (ok) zulassen .
Preflight-Anforderungen senden 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 Anforderung vorab ausgeführt, wenn andere Methoden als GET oder POST verwendet werden. Wenn POST zum Senden von Anforderungsdaten mit einem anderen Inhaltstyp als application / x-www-form-urlencoded, multipart / form-data oder text / plain verwendet wird, z. B. wenn die POST-Anforderung eine XML-Nutzlast an den Server sendet Wenn Sie application / xml oder text / xml verwenden, wird die Anforderung vorab ausgeführt. Es werden benutzerdefinierte Header in der Anforderung festgelegt (z. B. verwendet die Anforderung einen Header wie X-PINGOTHER).
Wenn Sie die Feder verwenden, wird das Problem durch Hinzufügen des folgenden Codes behoben. Hier habe ich das csrf-Token deaktiviert, das unabhängig von Ihren Anforderungen keine Rolle spielt.
Wenn Sie die Federsicherung verwenden, verwenden Sie den folgenden Code zusammen mit dem obigen Code.
quelle
Ich bin auf ein ähnliches Problem wie dieses gestoßen, das Problem war das Backend. Ich habe Node Server (Express) verwendet. Ich hatte eine Get-Anfrage vom Frontend (eckig), wie unten gezeigt
Aber es gab den folgenden Fehler
Dies ist der Backend-Code, der mit Express ohne die Header geschrieben wurde
Nach dem Hinzufügen eines Headers zur Methode wurde das Problem gelöst
Weitere Informationen zum Aktivieren von CORS auf Node JS erhalten Sie
quelle
Von mir selbst beantwortet.
CORS eckig js + restEasy auf POST
Nun, endlich bin ich zu dieser Problemumgehung gekommen: Der Grund, warum es mit IE funktioniert hat, ist, dass IE direkt einen POST sendet, anstatt zuerst eine Preflight-Anfrage, um um Erlaubnis zu bitten. Aber ich weiß immer noch nicht, warum der Filter eine OPTIONS-Anforderung nicht verwalten konnte und standardmäßig Header sendet, die nicht im Filter beschrieben sind (scheint eine Überschreibung für diesen einzigen Fall zu sein ... vielleicht eine einfache Sache). .)
Daher habe ich in meinem Rest-Service einen OPTIONS-Pfad erstellt, der die Antwort neu schreibt und die Header mithilfe des Antwortheaders in die Antwort einbezieht
Ich bin immer noch auf der Suche nach einem sauberen Weg, wenn jemand dies zuvor gesehen hat.
quelle
Apache / HTTPD gibt es in den meisten Unternehmen oder wenn Sie Centos / etc zu Hause verwenden. Wenn Sie das haben, können Sie sehr einfach einen Proxy erstellen, um die erforderlichen CORS-Header hinzuzufügen.
Ich habe hier einen Blog-Beitrag dazu , da ich in letzter Zeit einige Male darunter gelitten habe. Das Wichtigste ist jedoch, dies einfach zu Ihrer Datei /etc/httpd/conf/httpd.conf hinzuzufügen und sicherzustellen, dass Sie bereits "Listen 80" ausführen:
Dadurch wird sichergestellt, dass alle Anforderungen an URLs unter Ihrer Server-IP: 80 / SomePath-Route an http: // Ziel-IP: 8080 / SomePath (die API ohne CORS-Unterstützung) weitergeleitet werden und mit der richtigen Zugriffssteuerung (Zulässig) zurückgegeben werden. Origin-Header, damit sie mit Ihrer Web-App arbeiten können.
Natürlich können Sie die Ports ändern und auf den gesamten Server anstatt auf SomePath abzielen, wenn Sie möchten.
quelle
Diese Antwort beschreibt zwei Möglichkeiten, um APIs zu umgehen, die CORS nicht unterstützen:
Eine Problemumgehung ist die Verwendung eines CORS PROXY:
Weitere Informationen finden Sie unter
Verwenden Sie JSONP, wenn die API dies unterstützt:
Die DEMO auf PLNKR
Weitere Informationen finden Sie unter
quelle
quelle
Wir können CORS im Frontend mithilfe des ngResourse-Moduls aktivieren. Am wichtigsten ist jedoch, dass wir diesen Code haben, während wir die Ajax-Anfrage im Controller stellen.
Außerdem müssen Sie ngResourse CDN im Skriptteil hinzufügen und als Abhängigkeit im App-Modul hinzufügen.
Verwenden Sie dann "ngResourse" im Abschnitt "Abhängigkeit des App-Moduls"
var routerApp = angular.module("routerApp", ["ui.router", 'ngResource']);
quelle