Question

我一直试图使用$ http.jsonp从我的AngularJS代码调用外部API（Vimeo）。但我得到的只是401授权，即使我将我的授权密钥添加到标题。有一个类似的问题与jQuery.ajax（）做同样的事情。但是使用jQuery我通过设置beforeSend函数来解决问题，使用xhr对象在请求Header上设置我的授权密钥。

我的代码：

function(){
  var config = {
              headers: {Authorization: "bearer 34210aeac4e02a251b8821a53620e93c"},
              params : {
                  callback: 'JSON_CALLBACK'
                  }
              };
  var url = "https://api.vimeo.com/tags/fun/videos?per_page=5";
  $http.jsonp(url, config).success(function(response){
      console.log(response);
  });
};

我如何让它发挥作用。是某种config.beforeSend，我可以像jQuery一样设置标题

Answer 1

在角度中你可以使用http interceptor

定义你的http拦截器：这个将在每个http请求上添加一个令牌

ng.module('interceptors')
 .factory('authorizationInterceptor', function () {
    return {
        request: function (config) {
           config.headers = config.headers || {};
           config.headers.Authorization = 'Bearer ' +  '34210aeac4e02a251b8821a53620e93c';
           return config;
       }
};});

注册你的拦截器

angular.module('myApp',[]).config(['$httpProvider',function ($httpProvider) {
    $httpProvider.interceptors.push('authorizationInterceptor');
    $httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';
}]);

注意，我认为持票人的第一个字母必须是你头上的大写字母

Answer 2

我不太了解Angular，但我认为问题在于你正在使用JSONP。由于它使用浏览器的脚本标记来解决CORS限制，因此它不允许使用GET以外的动词，也不允许设置标题。

Vimeo API支持CORS标头，因此您实际上希望使用浏览器的AJAX功能发出常规GET请求。我相信AngularJS为此提供$http.get函数来执行您当前正在执行的操作（docs）。

我会尝试：

function(){
    var config = {
        headers: {Authorization: "Bearer 34210aeac4e02a251b8821a53620e93c"}
    };
    var url = "https://api.vimeo.com/tags/fun/videos?per_page=5";
    $http.get(url, config).success(function(response){
        console.log(response);
    });
};

使用AngularJs进行Vimeo API请求＆＃34; 401需要授权＆＃34;

2 个答案: