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