xdomain.jsを活用してAngularJSでIE9のCORS対応を行う

今年に入ってから書類のやり取りで封筒の宛名書きが大幅に増え、手書きに限界を感じ、テプラGrand WR1000を導入したのは良かったものの、ドライバーがYosemite対応されておらず、ラベルを作成するためだけに、都度VirtualBoxでWindowsを立ち上げている代表の国本です。

Internet Explorer(通称IE)。Web業界に携わる人間であれば、このIEに悩まされることは度々あるかと思いますが。今回はAngularJSでIE9のCORS(Cross-Origin Resource Sharing)対応を行う方法を簡単に紹介しようと思います。

IE9でのCORSについて

周知の通り、IE9ではXMLHttpRequestによるCORSをサポートしておらず、IE9でAjax通信を行い、かつ異なるドメインのリソースにアクセスしたい場合(いわゆるクロスドメイン通信)、IE独自のXDomainRequestオブジェクトを利用する必要があります。

しかしAngularJSでは、IE独自のXDomainRequestオブジェクトをサポートしておらず、resourceオブジェクトなどでRESTfulなサーバーサイドAPIとの通信を定義しても、残念なことにIE9では利用できません。

xdomain.jsの活用

上述の通り、素の状態ではIE9でのクロスドメイン通信が行えないため、今回は xdomain.jsライブラリを活用して、クロスドメイン通信を実現します。

xdomain.jsを利用することで、AngularJSやAPIサーバーサイドのコードに手を加えること無く、IE9でのシームレスなクロスドメイン通信を実現することが可能です。

xdomain.jsではMasterドメインSlaveドメインという概念があり

  • Ajax通信を行うリクエスト元 → Masterドメイン
  • Ajax通信の受け手となるサーバーサイドAPI → Slaveドメイン

となります。(ここらへんの定義が感覚的に微妙にわかりづらい….)

実装前提

下記バージョンで動作確認を行っています。

  • AngularJS 1.3.6
  • xdomain.js 0.6.15

Ajaxの通信先となるREST APIサーバーサイドではCORSに必要なAllowedOriginヘッダーなどの設定は既に完了している前提とします。

導入手順

導入は簡単で下記2ステップのみとなります。

  1. APIサーバーサイドのWebサーバに専用のproxy.htmlというファイルを配置
  2. AngularJS側でIE9の時にxdomain.jsを読み込みAPI通信を定義

1. サーバーサイドAPIへproxy.htmlを配置

まず最初に、SlaveドメインとなるサーバーサイドAPIにproxy.htmlというファイル名で、xdomain.jsを読み込むHTMLファイルを配備します。

配備させるproxy.htmlの内容はこれだけ。

1
2
<!DOCTYPE HTML>
<script src="//cdn.rawgit.com/jpillora/xdomain/0.6.15/dist/0.6/xdomain.min.js" data-master="*"></script>

CDNからxdomain.jsを読み込み、data-masterにてリクエストを許可するドメイン、アクセスパスをセットします。(今回は、とりあえず全アクセスを許可)

data-masterは正規表現の利用が可能で、詳細はこちらのREADMEをご確認下さい。

ファイル配備が完了後に、proxy.htmlにブラウザでアクセスを行い正常にロードできていることを確認します。

2. AngularJSでのxdomain.jsの読み込み

次に、MasterドメインとなるAngularJS側で、IE9でアクセスしてきたクライアントのみxdomain.jsをロードし、接続先のSlaveドメイン(つまり接続したいクロスドメインのAPI群)を定義します。

今回はサンプルとして、app/index.htmlに下記記述を行いロードします。

1
2
3
4
5
6
7
8
9
<!--[if IE 9]>
<script src="//cdn.rawgit.com/jpillora/xdomain/0.6.15/dist/0.6/xdomain.min.js"></script>
<script>
xdomain.slaves({
'http://qpi01.example.local': '/xdomain/proxy.html',
'http://qpi02.example.local': '/xdomain/proxy.html'
});
</script>
<![endif]-->

IE9でのアクセス時にCDNからxdomain.jsをロードし、接続を行いたいAPIに対し、手順1.で配置したproxy.htmlへのアクセスパスをセットします。

以上で導入作業は完了となり、AngularJSやサーバーサイドのコード変更なく、IE9でもクロスドメイン通信が行えるようになります。

まとめ

サービスサイドで、IE9はサポートしません!!( ー`дー´)キリッ とぶった斬りできればシンプルで一番良いとは思いますが、IE9のシェアや様々な政治的背景で現時点ではそれはなかなか難しい状況かと思います。

IE9が根絶するその日まで、頑張っていきましょう╭( ・ㅂ・)و ̑̑

今回ご紹介したような、AngularJSなどのフレームワークを活用したフロントエンドアプリケーション開発を御希望の企業様は、是非お気軽にMMMにご相談下さいませ!

このエントリーをはてなブックマークに追加