Month: 8月 2013

クロスサイトな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から指定したヘッダーが取得出来るようになります。
尚、*(アスタリスク)の指定も可能です。