wake-up-neo.com

Auf dem angeforderten Ressourcen-AngularJS ist kein Header "Access-Control-Allow-Origin" vorhanden

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

Ich erhalte diese Fehlermeldung, wenn ich versuche, meinen Web-Service aus meinem Code heraus auszuführen. Ich versuchte es herauszufinden und probierte viele Lösungen aus, die ich im Internet gefunden hatte. Fügen Sie den Code unten ein.

<form name="LoginForm" ng-controller="LoginCtrl" ng-submit="init(username,password,country)">
    <label>Country</label><input type="text" ng-model="country"/><br/><br/>
    <label>UserName</label><input type="text" ng-model="username" /></br></br>
    <label>Password</label><input type="password" ng-model="password">
    </br>
    <button type="submit" >Login</button>
</form>

Und die Controller-Form der entsprechenden Js lautet: 

app.controller('LoginController', ['$http', '$scope', function ($scope, $http) {
    $scope.login = function (credentials) {
    $http.get('http://mywebservice').success(function ( data ) {
        alert(data);
        });
    }
}]);

Der Web-Service funktioniert einwandfrei, wenn ich über die URL-Leiste darauf klicke. Wie löse ich das Problem? Freundlich helfen!

angularjsajaxcorscross-domain
69
Ru11

Der Chrome-Webstore hat eine Erweiterung, die den Header "Access-Control-Allow-Origin" für Sie hinzufügt, wenn auf der Seite ein asynchroner Aufruf erfolgt, der versucht, auf einen anderen Host als Ihren zuzugreifen.

Der Name der Erweiterung lautet: "Allow-Control-Allow-Origin: *". Dies ist der Link: https://chrome.google.com/webstore/detail/allow-control-allow- origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

26
Patricio Córdova

Auf der Clientseite können Sie Cors-Anfragen in AngularJS über aktivieren

app.config(['$httpProvider', function($httpProvider) {
        $httpProvider.defaults.useXDomain = true;
        delete $httpProvider.defaults.headers.common['X-Requested-With'];
    }
]);

Wenn dies jedoch immer noch einen Fehler zurückgibt, bedeutet dies, dass der Server, den Sie anfragen, die CORS-Anforderung zulassen muss und dafür konfiguriert werden muss.

18
ALi Mir

Dies ist eine Ausgabe von CORS . Es gibt einige Einstellungen, die Sie in Winkel ändern können - diese Einstellungen habe ich normalerweise in der Angular-Methode .config festgelegt (nicht alle beziehen sich auf CORS):

$httpProvider.defaults.useXDomain = true;
$httpProvider.defaults.withCredentials = true;
delete $httpProvider.defaults.headers.common["X-Requested-With"];
$httpProvider.defaults.headers.common["Accept"] = "application/json";
$httpProvider.defaults.headers.common["Content-Type"] = "application/json";

Sie müssen auch Ihren Webservice konfigurieren - die Details dazu hängen von der verwendeten serverseitigen Sprache ab. Wenn Sie ein Netzwerküberwachungstool verwenden, sendet es zunächst eine OPTIONS-Anforderung. Ihr Server muss entsprechend reagieren, um die CORS-Anforderung zuzulassen.

Der Grund, warum es in Ihrem Browser funktioniert, ist, dass es keine Cross-Origin-Anfrage macht - während Ihr Angular-Code dies ist.

16
Lee Willis

Ich habe eine Lösung unten und ihre Werke für mich:

app.controller('LoginController', ['$http', '$scope', function ($scope, $http) {
$scope.login = function (credentials) {
$http({
        method: 'jsonp',
        url: 'http://mywebservice',
        params: {
            format: 'jsonp',
            callback: 'JSON_CALLBACK'
        }
    }).then(function (response) {
        alert(response.data);
    });
  }
}]);

in ' http: // mywebservice ' muss ein callback - Parameter vorhanden sein, der JSON_CALLBACK mit Daten zurückgibt.
Es gibt ein Beispiel, das perfekt funktioniert 

$scope.url = "https://angularjs.org/greet.php";
    $http({
        method: 'jsonp',
        url: $scope.url,
        params: {
            format: 'jsonp',
            name: 'Super Hero',
            callback: 'JSON_CALLBACK'
        }
    }).then(function (response) {
        alert(response.data);
    });

beispielausgabe: 

{"name":"Super Hero","salutation":"Apa khabar","greeting":"Apa khabar Super Hero!"}
4
Nadimul De Cj

Ich fügte das hinzu und es funktionierte gut für mich.

web.api

config.EnableCors();

Dann rufen Sie das Modell mit cors an:

In einem Controller werden Sie oben für den globalen Geltungsbereich oder für jede Klasse hinzugefügt. Es liegt an dir.

 [EnableCorsAttribute("http://localhost:51003/", "*", "*")]

Wenn Sie diese Daten auf Angular übertragen, möchten Sie auch, dass die .cshtml-Datei ebenfalls aufgerufen wird. Andernfalls werden die Daten übertragen, ohne die Ansicht zu füllen.

(function () {
    "use strict";
    angular.module('common.services',
        ['ngResource'])
    .constant('appSettings',
    {
        serverPath: "http://localhost:51003/About"
    });
}());

//Replace URL with the appropriate path from production server.

Ich hoffe, das hilft jedem, das Entity Framework zu verstehen und warum CORS so nützlich ist. 

2
John Aldrin

In meinem Fall habe ich versucht, einen WebAPI-Dienst auf localhost aus einer MVC-App heraus zu starten, die viel Angular-Code verwendete. Mein WebAPI-Dienst funktionierte gut mit Fiddler über http: // localhost/myservice . Nachdem ich mir einen Moment Zeit genommen hatte, um die MVC-App für die Verwendung von IIS anstelle von IIS Express (ein Teil von Visual Studio) zu konfigurieren, funktionierte es einwandfrei, ohne dass einem der Bereiche CORS-bezogene Konfiguration hinzugefügt wurde.

1
user5373289

Es ist ein Problem auf der Serverseite. Sie müssen Ihre Client-Adresse zu Ihrer vom Server bereitgestellten API hinzufügen. Wenn Sie mit Frames arbeiten, können Sie @CrossOrgin aus org.springframework.web.bind.annotation.CrossOrigin kommentieren.

ZB: @ CrossOrigin (origins = " http: // localhost: 8080 ")

0
user8033402

Ersetzen Sie get durchjsonp:

 $http.jsonp('http://mywebservice').success(function ( data ) {
    alert(data);
    });
}
0
Travis Heeter

Ich habe 

Es ist kein 'Access-Control-Allow-Origin'-Header vorhanden

und das Problem war mit der von mir angegebenen URL. Ich habe die URL ohne Route angegeben, z. B. https://misty-valley-1234.herokuapp.com/. 

Wenn ich einen Pfad hinzufügte, funktionierte es, z. B. https://misty-valley-1234.herokuapp.com/messages. Bei GET-Anforderungen funktionierte es in beiden Richtungen, bei POST -Antworten jedoch nur mit dem hinzugefügten Pfad.

0
Thomas David Kehoe

Verwenden Sie diese Erweiterung für Chrom. Ermöglicht Ihnen das Anfordern einer Site mit Ajax aus einer beliebigen Quelle. Fügt der Antwort "Allow-Control-Allow-Origin: *" Header hinzu

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

0
Amaru Hash