webentwicklung-frage-antwort-db.com.de

AngularJS: POST Daten an externe REST API

Ich habe eine Grundeinstellung für den AngularJS-Dienst:

app.factory('User', function($resource) {
return $resource('http://api.mysite.com/user/:action:id/:attr', {}, {
    history: {
        method: 'GET',
        params: {
            attr: 'history'
        }
    },
    update: {
        method: 'POST',
        params: {
            name: 'test'
        }
    }
});
});

und ich benutze es so:

User.history({id: 'testID'}, function(data) {
    console.log('got history');
    console.log(data);
});
User.update({id: 'me'}, function(data) {
    console.log('updated');
    console.log(data);
});

Problem eins: User.update () sendet trotz der auf POST eingestellten Methode weiterhin OPTIONS als Anforderungsmethode.

Chrome Dev-Tools meldet zwar den Request-Header Access-Control-Request-Method: Auch POST wird gesendet (nicht sicher, ob dies etwas bedeutet).

Problem zwei: Ich bekomme immer einen Fehler mit CORS, obwohl diese Header im API-Code gesetzt sind:

header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Methods: PUT, GET, POST, DELETE, OPTIONS");

Dieses Problem tritt jedoch nur auf, wenn Sie eine Nicht-GET-Anforderung durchführen.

Was ist der richtige Weg, um damit umzugehen? Ich habe auch in JSONP nachgesehen, aber da dies eine RESTful-API ist, bin ich nicht sicher, wie ich die Probleme nur mit GET-Unterstützung umgehen kann.

javascriptapiangularjscross-domaincors
16
Lucas Raines

Ihre zwei Probleme sind eigentlich ein Problem. Die Anforderung OPTIONS ist Teil des CORS-Prozesses. Bei POST - Anforderungen sendet der Browser zuerst einen Aufruf von OPTIONS. Der Server antwortet, ob er ausgeführt werden kann. 

Wenn die Anforderung von OPTIONS fehlschlägt, zeigt Angular/Chrome den Grund in der Konsole an. Zum Beispiel: 

OPTIONS https://*** Request header field Content-Type is not allowed by Access-Control-Allow-Headers. angular.min.js:106

XMLHttpRequest cannot load https://***. Request header field Content-Type is not allowed by Access-Control-Allow-Headers.

Sie müssen wahrscheinlich auch Access-Control-Allow-Header auf dem Server festlegen:

header('Access-Control-Allow-Headers: Content-Type, x-xsrf-token')

x-xrsf-token ist für angle ', um CSRF zu verhindern. Je nachdem, was Sie vom Client senden, müssen Sie möglicherweise weitere Header hinzufügen.

Hier ist ein sehr guter Leitfaden zu CORS: https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS

14
Narretz

In AngularJS müssen Sie die Voreinstellungen des Winkels httpProvider überschreiben, damit CORS funktioniert.

var myApp = angular.module('myApp', [
    'myAppApiService']);

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

Es genügt nicht, useXDomain auf true zu setzen. AJAX - Anfrage sind auch send mit dem Header X-Requested-With, der sie als .__ anzeigt. AJAX. Das Entfernen des Headers ist erforderlich, damit der Server nicht .__ ablehnt. die eingehende Anfrage.

Hinweis : Die Antwort funktioniert nur für ältere AngularJS-Versionen vor 1.2. Ab 1.2 müssen Sie nichts tun, um CORS zu aktivieren.

7
Torsten Engelbrecht

Besser, dieses Problem am Server zu lösen. Auf Apache können Sie es so in einer .htaccess-Datei lösen. Dies ist eine Schmerzquelle für die Winkelentwicklung und kann auch in Winkel gelöst werden, aber es ist wahrscheinlich nicht die beste Art, dies zu tun. 

Header set Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "Origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"
0
rotato poti