AngularJS include API key in a get request

Question

I am trying to get information from a fantasy data API using AngularJS. I am using $resource to perform my get request in my controller, but I haven't been able to figure out how to correctly include the API key. Do I need to include it as a header? Thanks.

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);

}]);

Below is the http request info from the site.

You need send also subscription key without that key not possible get data on api. — ZgrKARALAR, Dec 28 '15 at 20:12
@ZgrKARALAR How would i correctly include the subscription key in my code? — Jeff Tabachnick, Dec 28 '15 at 20:15
You can add your code $http.defaults.headers.common["Ocp-Apim-Subscription-Key"] = subkey; write your subkey if you need more details check this page [link] (http://www.angulartutorial.net/2014/05/set-headers-for-all-http-calls-in.html) — ZgrKARALAR, Dec 28 '15 at 20:26

score 1 · Accepted Answer · answered Dec 28 '15 at 20:24

1

You should set a header with the API key, AngularJS will send them with every request in the following case:

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

When adding '.common' you are telling angular to send this in every request so you do not need to add it to every resource that hits the API.

answered Dec 28 '15 at 20:24

Lucas

9,871
5
42
52

1

And the place to set the common headers is usually in the run() method. https://docs.angularjs.org/guide/module#module-loading-dependencies – Josh Russo Dec 28 '15 at 20:49
Right, should have clarified – Lucas Dec 28 '15 at 20:52

score 0 · Answer 2 · answered Dec 28 '15 at 20:16

A easy way to do that is by creating your own interceptors from $httpProvider at "config" fase.

To do that, just write something like:

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;
                }
            };
        });

});

score 0 · Answer 3 · edited May 23 '17 at 12:17

You need to modify request header in JSONP. Unfortunately it is not possible. As the browser is responsible for header creation and you just can't manipulate that when using JSONP method.

how to change the headers for angularjs $http.jsonp

Set Headers with jQuery.ajax and JSONP?

From that link - https://johnnywey.wordpress.com/2012/05/20/jsonp-how-does-it-work/

Why NOT To Use JSONP?
Deciding against using JSONP is directly related to how it works. First of all, the only HTTP method you can use is GET since that is the only method script tags support. This immediately eliminates the use of JSONP as an option to interact with nice RESTful APIs that use other HTTP verbs to do fun stuff like CRUD. And while we’re on the subject of GET, note that using anything other than URL parameters to communicate with the server API (e.g. sending some JSON over) is also not possible. (You could encode JSON as a URL parameter, but shame on you for even thinking that.)

If they only work with header manipulation you will need to do that call from your server side.

AngularJS include API key in a get request

3 Answers3