ヘッダーにトークンを送信するGETメソッド

Question

サイトとWeb APIがあります。私はWeb APIサーバーから受信したすべてのファイル。

私はサイト上でADFS OAUTH2認証を取得しています。 そして、認証トークンを使ってWeb APIから画像を取得する必要があります。

は、だから今、私はこのような何か：

<img src='webApiUrl/Photo/Id?token=token_value' alt /> 

をしかし、私はトークンの長さのバグを持っています。それは一部のクライアントにとっては非常に長く、私はそれを制御することはできません。 xhrリクエストで承認ヘッダーを送信できますが、srcからリソースを要求するサイトの承認ヘッダーを設定する方法がわかりません。

修正できますか？

Answer 1

Web APIへのHTTP要求がある場合は、Angular Interceptorsを使用してトークンを要求ヘッダーに置くことができます。ここでは、ベアラ認証を実証することを選択しました。

appName.config(["$httpProvider", ($httpProvider: ng.IHttpProvider) => { 
       $httpProvider.interceptors.push(<any>["$q", "$location", 
        ($q: ng.IQService, $location: ng.ILocationService) => { 
         return { 

        // config is the request data, including all its properties 
          'request': (config) => { 

           // Intercepting only the API requests 
           if (config.url.indexOf(apiServerUrl) >= 0) { 

           // Getting the token from local storage for example 
            var token = localStorage.getItem("token"); 

           // Placing the token in the right header           
            if (token) 
            config.headers["Authorization"] = "Bearer " + token; 
           } 
           return config; 
          } 
         } 
        } 
       ]); 
      }]); 

Answer 2

多分これはあなたの問題を解決するだろう：このようhttp://blog.jsgoupil.com/request-image-files-with-angular-2-and-an-bearer-access-token/

それはあなたのimgタグでセキュアなsrc属性を使用できるようにパイプを登録する必要。