クロスサイトなAjaxでヘッダーを取得する

クロスサイトなAjaxで、ヘッダーを取得する際にちょっとはまったのでメモ。

例えば、
Ajax

  $.ajax({ type:       "GET",
           url:        "http://url",
           dataType:   "text",
           ifModified: true,
           cache:      true,           
           success: function(data, status, xhr) {
             var etag = xhr.getResponseHeader("ETag");
             alert(etag);
           },
  });

こんな感じでETagヘッダーを取得したいAjaxがあるとして、
下記のようなレスポンスヘッダーだと、Javascriptで取得出来るヘッダーがかなり限られたものだけになります。

レスポンスヘッダー

Access-Control-Allow-Headers: ETag
Access-Control-Allow-Origin: http://url
Access-Control-Allow-Credentials: true

つまり、レスポンス自体はされていてブラウザも受け取っているのですが、
Javascriptに渡されるヘッダーが限られたものになります。
ということで、ブラウザに対してJavascriptに渡してよいヘッダーを、Access-Control-Expose-Headersヘッダーで指定します。

Access-Control-Allow-Headers: ETag
Access-Control-Allow-Origin: http://url
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: ETag

これでJavascriptから指定したヘッダーが取得出来るようになります。
尚、*(アスタリスク)の指定も可能です。

About irako

広告系Webエンジニア 最近はluaがお気に入り。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です