Angular JSを使用して許可ベアラートークンを使用してサーバーからイメージを取得する方法

Question

Angular JSを使用して、Authorization: Bearerトークンを使用してサーバーからイメージを取得しています。私はすでにLoading Image in JavaScript with Bearer tokenの例を見てきました。

私はそれが正常に動作します

var request = new XMLHttpRequest(); 
request.open('GET','https://dl.content.com/contentfile.jpg', true); 
request.setRequestHeader('Authorization', 'Bearer ' + oauthToken.access_token); 
request.responseType = 'arraybuffer'; 
request.onload = function(e) { 
    var data = new Uint8Array(this.response); 
    var raw = String.fromCharCode.apply(null, data); 
    var base64 = btoa(raw); 
    var src = "data:image;base64," + base64; 

    document.getElementById("image").src = src; 
}; 

request.send(); 

、のようなコードを使用しています。しかし、それは普通のJavaScriptで書かれています。同じことを達成するためにAngular JSを使用する同等の構文があるかどうかを知りたいだけです。

Anggarar JSの$httpを使ってみました。私のコードは以下のようになります。

$http({ 
      method: 'GET', 
      url: file, 
      headers: { 
       'Authorization': 'Bearer ' + Constants.token 
      } 
     }).then(function (data) { 
      console.log('from backend', data) 
     }) 

しかし、次のエラーが発生し、ブラウザがハングします。

エラースクリーンショット

エラーが発生した理由を私は知らないし、どのようにそれを修正します。

Answer 1

私が通常行っていることは、私が作成したリクエストに対してインターセプタを使用することです。

$httpProvider.interceptors.push('myInterceptor'); 

と要求と応答で作業する工場を使用します。あなたがこの記事 http://www.webdeveasy.com/interceptors-in-angularjs-and-useful-examples/

またはangularJsインターセプター

について検索についての詳細に関する情報を見つけることができます

.... .factory('myInterceptor', function() { 
return { 
    request: function(config) { 
     config.headers.Authorization="Bearer "+ myberer 
     return config; 
    }, 
    requestError: function(reject) { 
     // do something on error 
     console.log('request Error') 
    }, 
    response: function(config) { 

    }, 
    responseError: function(reject) { 
    } 
};