web-dev-qa-db-ja.com

Angularで$ resourceを使用して応答ヘッダーにアクセスするにはどうすればよいですか？

私は基本的にgetリクエストを次のように呼び出します：

var resource = $resource('/api/v1/categories/:id')

resource.get({id: 1}).$promise.then(function(data){
  console.log(data)
})

これは正常に動作しますが、応答ヘッダーを取得するにはどうすればよいですか？

angularjshttpangular-resource
19
Nathan

あなたはtransformResponseアクションを使うことができます ここで定義されています これはヘッダーを追加することを可能にします

$resource('/', {}, {
    get: {
        method: 'GET',
        transformResponse: function(data, headers){
            response = {}
            response.data = data;
            response.headers = headers();
            return response;
        }
    }

ここで実際の例を見てください JSFiddle

39
Martin

@Martinの回答は、同じドメイン要求で機能します。ですから、クロスドメインリクエストを使用している場合は、Access-Control-Expose-Headers: X-Blah, X-Bla 一緒に Access-Control-Allow-Origin:*ヘッダー。

どこ X-BlahおよびX-Blaはカスタムヘッダーです。

また、ヘッダーを取得するために変換要求を使用する必要はありません。次のコードを使用できます。

var resource = $resource('/api/v1/categories/:id')

resource.get({id: 1}, function(data, headersFun){
  console.log(data, headersFun());
})

this フィドルを参照してください。お役に立てれば ！！！

18
vinesh

古い質問ですが、将来の参考のために言及する価値があると思います。 angularのドキュメントに、これに対する「公式」の解決策があります：

Get、query、およびその他のメソッドの成功コールバックは、サーバーからの応答と$ httpヘッダーゲッター関数で渡されるため、上記の例を書き換えてhttpヘッダーへのアクセスを取得できることに注意してください。

var User = $resource('/user/:userId', {userId:'@id'});

var users = User.query({}, function(users, responseHeaders){
  // ...
  console.log(responseHeaders('x-app-pagination-current-page'));
});

（わかりやすくするためにドキュメントのコードを少し更新しました）

CORSリクエストの場合、他の回答に記載されているようにヘッダーを公開する必要があります。

6
rastasheep