Question

我试图使用ngResource来查询REST API。我需要在自定义标头中指定我的API密钥。我已经这样试过了：

angular.module('ApiService', ['ngResource'])

  .factory('Api', ['$resource', function($resource) {

    this.apiEndpoint = '';
    this.apiKey = '';

    return {

      init: function(apiEndpoint, apiKey) {
        this.apiEndpoint = apiEndpoint;
        this.apiKey = apiKey;
      },

      get: function(collection) {
        return $resource(this.apiEndpoint + 'api/1/' + collection, {},
          {
            get: {
              method: 'JSONP',
              headers: {'api_key': this.apiKey},
              params: {callback: 'JSON_CALLBACK'}
            }
          }
        ).get();
      }

    };

  }]);

然后我在我的控制器中使用，如：

app.controller('MyCtrl', function ($scope, Api, ENV) {
  Api.init(ENV.apiEndpoint, ENV.apiKey);
  var widgets = Api.get('widgets');
});

检查XHR时，我的自定义标题未设置。另外，为什么在初始.get()方法之后调用空$resource:get()之前XHR才会运行？

我还尝试直接在$httpResource设置标题：

  .config(function($httpProvider) {
    $httpProvider.defaults.headers.get  = {'api_key': 'abc123'};
  })

但是当我检查网络请求时，这仍然没有设置自定义标头。我错过了什么？

Answer 1

当然，这个问题是我在此请求中使用JSONP，它不包括在发出请求时制作标头的能力。请参阅how to change the headers for angularjs $http.jsonp。

具体来说，JSONP只在DOM底部包含一个<script>标记来加载跨域javascript，因此由浏览器发送默认标题。

AngularJS ngResource不发送自定义标头

1 个答案: