Daten konnten nicht von Remote-JSON geladen werden

Question

Ich baue Hybrid-App mit angularjs und ich versuche, den Dienst von externer Quelle anzurufen. aber wenn ich einen Anruf mit url ich bin immer Fehler

XMLHttpRequest cannot load https:XXXX/xxx.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access. 

hier ist mein Code

app.controller('overview', function($scope, $http) { 
    $http({ 
     method : "GET", 
     url : "https://ysaf.XXXX.yourcxxxxx/resource.json" 
    }).then(function appSucces(response) { 
     $scope.resources = response.data; 
    }, function appError(response) { 
     $scope.resources = response.statusText; 
    }); 
}); 

wenn ich rufen Sie die lokale .json Datei ich keine Störung erhalte aber nur, wenn ich rufe die externe API, ich bekomme diesen Fehler.

Gibt es irgendetwas, was ich in diesem Code falsch mache?

Answer 1

Access-Control-Allow-Origin ist auf die Antwort vom Server gesetzt, dies ist nicht auf Client-Anfrage, um Clients von verschiedenen Ursprüngen Zugriff auf die Antwort zu ermöglichen.

In diesem Fall ermöglicht https://ysaf.XXXX.yourcxxxxx/resource.json Ihrem Ursprung keinen Zugriff auf die Antwort. Deshalb kannst du es nicht lesen.

Answer 2

Fügen Sie die erforderlichen Header wie hinzu.

Das Problem, mit dem Sie konfrontiert sind, ist CORS Problem. CORS - Cross Origin Resource Sharing.

CORS Problem tritt auf folgenden Fällen

1) Wenn wir abc.com und den Zugriff auf xyz.com (verschiedene Domain)

2) Wenn wir in http://localhost:8080/myapplication und den Zugriff auf http://localhost:9080/anotherapplication (verschiedene Ports)

Answer 3

Sie diese Erweiterung für Ihre Entwicklung herunterladen sollten:

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

Es löst alle Access-Control-Allow-Origin Probleme :)

Vergessen Sie nicht, es zu deaktivieren, wenn Sie aufhören, könnte es ein Problem für die Web-Navigation sein.