クロスドメイン通信 を実現するには "サーバー側" と "クライアント側" の2カ所に対して手を入れる必要があるかどうか考えます。
ここでは、"サーバー側" の設定変更で GET リクエスト に関してクロスドメイン通信を実現する方法を載せます。
具体的には、Access-Control-Allow-Origin
ヘッダー を無条件に返す設定をすることで、
jQuery 等 で クロスドメイン通信 を行えるようにします。
想定する クロスドメイン通信 環境
今回は次の図に示すような環境でのクロスドメイン通信を想定し、 この状況でクロスドメイン通信を可能にするサーバー設定 (サーバーB の設定) を載せます。
IIS で クロスドメイン通信 を 許可する 設定
上図における サーバーB での設定手順は以下の通りです。 個人的な事情で IIS の設定を載せています。
- インターネット インフォメーション サービス (IIS) マネージャー を開きます。
- クロスドメインで通信したい仮想ディレクトリの「HTTP 応答ヘッダー」を開きます。
- 「操作」パネルの [追加...] を選択します。
- 以下のような名前、値を追加します。
- 名前
- Access-Control-Allow-Origin
- 値
- *
- HTTP 応答ヘッダー が追記できたら、IIS を再起動します。
(…しなくても勝手に再起動するはずですが。。)
注意
この方法は クライアントから GET リクエスト を行う場合のみ対応しています。 GET 以外の メソッド (POST, PUT 等) はうまくいきません(プリフライト が必要なため)。
また、上記設定だけで クロスドメイン通信 は実現できません。 クライアント側 の実装は以下を参考にしてください。
今回、以下のサイトを参考にしました。
- 同一生成元ポリシー
- HTTP access control (CORS)
- IE10 の CORS for XHR
- クロスドメインへのアクセスが回避できるXMLHttpRequest2
- JavaScriptのクロスドメイン問題対応方法
- IE8 速攻徹底レビュー
- Access-Control-Allow-Origin試してみた。その2
- 十三章第一回 XMLHTTPRequest - JavaScript初級者から中級者になろう
- Same-origin policy for file: URIs
最後に… このブログに興味を持っていただけた方は、 ぜひ 「Facebookページ に いいね!」または 「Twitter の フォロー」 お願いします!!