2015-12-28 6 views
6

Ich versuche, Informationen von einer Fantasy-Daten-API mit AngularJS zu erhalten. Ich benutze $ resource, um meine get-Anfrage in meinem Controller auszuführen, aber ich konnte nicht herausfinden, wie man den API-Schlüssel richtig einfügt. Muss ich es als Überschrift hinzufügen? Vielen Dank.AngularJS enthalten API-Schlüssel in einer Get-Anfrage

nflApp.controller('mainController', ['$scope','$resource','$routeParams', function($scope, $resource, $routeParams) { 

$scope.fantasyAPI = $resource("https://api.fantasydata.net/nfl/v2/JSON/DailyFantasyPlayers/2015-DEC-28", { callback: "JSON_CALLBACK" }, { get: { method: "JSONP"}}); 

console.log($scope.fantasyAPI); 

}]); 

Unten ist die HTTP-Anfrage Informationen von der Website. http request info

+0

Sie müssen auch Subskriptionsschlüssel senden, ohne dass dieser Schlüssel nicht möglich ist, Daten über API zu erhalten. – ZgrKARALAR

+0

@ZgrKARALAR Wie würde ich den Abonnementschlüssel korrekt in meinen Code aufnehmen? –

+0

Sie können Ihren Code $ http.defaults.headers.common hinzufügen ["Ocp-Apim-Subscription-Key"] = Unterschlüssel; schreibe deinen Unterschlüssel, wenn du mehr Details benötigst überprüfe diese Seite [link] (http://www.angulartutorial.net/2014/05/set-headers-for-all-http-calls-in.html) – ZgrKARALAR

Antwort

1

Sie einen Header mit der API-Schlüssel setzen soll, AngularJS wird sie mit jeder Anforderung im folgenden Fall an:

$http.defaults.headers.common["Ocp-Apim-Subscription-Key"] = key; 

Beim Hinzufügen von ‚.common‘ Sie Winkel sagen dies so in jeder Anfrage zu senden Sie müssen es nicht zu jeder Ressource hinzufügen, die die API trifft.

+1

Und der Ort zu Setzen Sie die allgemeinen Header ist in der Regel in der run() -Methode. https://docs.angularjs.org/guide/module#module-loading-dependencies –

+0

Richtig, sollte geklärt haben – FRECIA

0

Eine einfache Möglichkeit, das zu tun ist, indem Sie Ihre eigene interceptors von $httpProvider bei "Config" -Fase erstellen.

, das zu tun, schreiben Sie einfach so etwas wie:

mymodule.config(['$httpProvider', function($httpProvider){ 

$httpProvider.interceptors.push(function ($q) { 
      return { 
       'request': function (config) { 
        config.headers['Ocp-Apim-Subscription-Key'] = SomeUserClass.AuthToken(); 

        return config; 
       }, 

       'response': function (response) { 



        return response; 
       } 
      }; 
     }); 

}); 
0

Sie müssen Request-Header in JSONP ändern. Leider ist das nicht möglich. Da der Browser für die Header-Erstellung zuständig ist, können Sie dies bei Verwendung der JSONP-Methode nicht ändern.

how to change the headers for angularjs $http.jsonp

Set Headers with jQuery.ajax and JSONP?

Von diesem Link - https://johnnywey.wordpress.com/2012/05/20/jsonp-how-does-it-work/

Warum JSONP nicht verwenden?
Die Entscheidung, JSONP zu verwenden, hängt direkt damit zusammen, wie es funktioniert. Zuallererst ist die einzige HTTP-Methode, die Sie verwenden können, GET, da dies die einzige Methode ist, die Skript-Tags unterstützen. Dies eliminiert sofort die Verwendung von JSONP als eine Option, um mit netten RESTful-APIs zu interagieren, die andere HTTP-Verben verwenden, um lustige Sachen wie CRUD zu machen. Und während wir zum Thema GET sind, beachten Sie, dass auch andere als URL-Parameter mit der Server-API kommunizieren (z. B. Senden von JSON über) ist ebenfalls nicht möglich. (Sie könnten JSON als URL-Parameter kodieren, aber schade, dass Sie das auch denken.)

Wenn sie nur mit Header-Manipulation arbeiten, müssen Sie diesen Aufruf von Ihrer Server-Seite aus tun.

Verwandte Themen