AngularJS在get请求中包含API密钥

Question

我正在尝试使用AngularJS从幻想数据API获取信息。 我使用$ resource在我的控制器中执行我的get请求，但是我无法弄清楚如何正确地包含API密钥。 我是否需要将其作为标题包含在内？ 谢谢。

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

}]);

以下是该站点的http请求信息。

Answer 1

您应该使用API​​密钥设置标头，AngularJS会在以下情况下将每个请求发送给它们：

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

添加'.common'时，您会告诉angular在每个请求中发送此消息，因此您无需将其添加到每个访问API的资源中。

Answer 2

一个简单的方法是在$httpProvider的“config”fase创建自己的interceptors 。

要做到这一点，只需写下：

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

});

Answer 3

您需要在JSONP中修改请求标头。 不幸的是，这是不可能的。 由于浏览器负责创建标头，因此在使用JSONP方法时无法操纵它。

如何更改angularjs $ http.jsonp的标题

使用jQuery.ajax和JSONP设置标头？

从该链接 - https://johnnywey.wordpress.com/2012/05/20/jsonp-how-does-it-work/

为什么不使用JSONP？
决定不使用JSONP与其工作方式直接相关。 首先，您可以使用的唯一HTTP方法是GET，因为这是脚本标记支持的唯一方法。 这立即消除了使用JSONP作为一个选项，与使用其他HTTP动词的好RESTful API交互来做有趣的事情，比如CRUD。 虽然我们讨论GET的主题，但请注意，使用除URL参数之外的任何内容来与服务器API进行通信 （例如，发送一些JSON）也是不可能的。 （你可以将JSON编码为一个URL参数，但是即使你这么想也会感到羞耻。）

如果它们只使用标头操作，则需要从服务器端进行该调用。