4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

$.ajaxでクロスドメイン対応(IE9)

Posted at

アプリが動作する別のサーバにリクエストを投げた際、ChromeやIE11などのブラウザでは問題なく動作したのですが、IE9で上手くいかなかったことがありました。その際の対応を記しております。

CORS

Cross-Origin Resource Sharingの略。通常XMLHttpRequestは Same-Origin Policyに従います。
ですので、http://hoge-a.com で提供されているアプリケーションのフロントエンドJavaScriptから、XMLHttpRequestで http://hoge-b.com/add へのリクエストは別オリジンへのアクセスとなり、制限されます。
オリジン間でこのようなリクエストを許可したい場合、サーバ側のレスポンスヘッダに Access-Control-Allow-Origin で許可するオリジンを指定します。
参考:オリジン間リソース共有 (CORS)

IE9で上手くいかない

今回直面したケースは、フロントエンドJavaScriptから $.ajax を使って別オリジンに対してXMLHttpRequestを投げるというものでした。サーバ側にはAccess-Control-Allow-Origin を指定して、Chrome, IE11でレスポンスが帰ってくることを確かめました。しかしIE9で実施するとレスポンスが返ってこない...

対応

jQuery.support.cors = true;

ブラウザがXMLHttpRequestを生成でき、そのオブジェクトがwithCredentialsプロパティを持っていればtrueです。 corsがサポートされていない環境で、クロスドメインXHRリクエストを許可し、クロスドメインリクエストを実行するには $.support.cors = true;を行なってください。

参考:$.support | jQuery 1.9 日本語リファレンス | js STUDIO

CORSがサポートされていないブラウザで別オリジンへのXMLHttpRequestを実行する際は、コード内で上記を含める必要があります。対応後、IE9でもレスポンスが返ってきました!

4
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?