Запрос Vimeo API с AngularJs 401 Требуется авторизация

Я пытался вызвать внешний API (Vimeo) из моего кода AngularJS, используя $http.jsonp. Но все, что я получаю, это требуемая авторизация 401, хотя я добавил свой ключ авторизации в заголовок. была аналогичная проблема с jQuery.ajax(). Но с помощью jQuery я решил проблему, установив функцию beforeSend для установки моего ключа авторизации в заголовке запроса с использованием объекта xhr.

My code: 

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


javascript ajax angularjs vimeo-api
person ifedapo olarewaju    schedule 28.09.2014    source источник

Ответы (2)


arrow_upward
0
arrow_downward

В angular вы можете использовать https://docs.angularjs.org/api/ng/service/$http

  1. Определите свой http-перехватчик: он будет добавлять токен на каждый http-запрос.

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

  2. зарегистрировать свой перехватчик

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

Обратите внимание, я думаю, что первая буква предъявителя должна быть заглавной в вашем заголовке.

person laurent    schedule 29.09.2014

arrow_upward
0
arrow_downward

Я не очень хорошо знаю Angular, но думаю, проблема в том, что вы используете JSONP. . Поскольку для обхода ограничений CORS используется тег script браузера, он не позволяет использовать глаголы, отличные от GET, и не позволяет устанавливать заголовки.

Vimeo API поддерживает заголовки CORS, так что вы действительно хотите сделать обычный запрос GET, используя функциональность AJAX браузера. Я считаю, что AngularJS предоставляет для этого функцию $http.get, чтобы делать то, что вы сейчас делаете (документы).

Я бы попробовал:

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);
    });
};
person sclm    schedule 29.09.2014