2014.12.11 2022.10.28

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

kuni

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

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

Contents

IE9でのCORSについて
xdomain.jsの活用
実装前提
導入手順
まとめ

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ステップのみとなります。

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

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

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

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

<!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に下記記述を行いロードします。

<!--[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でもクロスドメイン通信が行えるようになります。