クロスドメイン制約 を サーバー設定 で 回避

クロスドメイン通信 を実現するには "サーバー側" と "クライアント側" の2カ所に対して手を入れる必要があるかどうか考えます。 ここでは、"サーバー側" の設定変更で GET リクエスト に関してクロスドメイン通信を実現する方法を載せます。 具体的には、Access-Control-Allow-Origin ヘッダー を無条件に返す設定をすることで、 jQuery 等 で クロスドメイン通信 を行えるようにします。

想定する クロスドメイン通信 環境

今回は次の図に示すような環境でのクロスドメイン通信を想定し、 この状況でクロスドメイン通信を可能にするサーバー設定 (サーバーB の設定) を載せます。

IIS で クロスドメイン通信 を 許可する 設定

上図における サーバーB での設定手順は以下の通りです。 個人的な事情で IIS の設定を載せています。

1. インターネット インフォメーション サービス (IIS) マネージャー を開きます。
   
2. クロスドメインで通信したい仮想ディレクトリの「HTTP 応答ヘッダー」を開きます。
   
3. 「操作」パネルの [追加...] を選択します。
   
4. 以下のような名前、値を追加します。
   

   名前

   Access-Control-Allow-Origin

   値

   *

   
5. HTTP 応答ヘッダー が追記できたら、IIS を再起動します。
   （…しなくても勝手に再起動するはずですが。。）
   

注意

この方法は クライアントから GET リクエスト を行う場合のみ対応しています。 GET 以外の メソッド (POST, PUT 等) はうまくいきません（プリフライト が必要なため）。

また、上記設定だけで クロスドメイン通信 は実現できません。 クライアント側 の実装は以下を参考にしてください。

• IE8, IE9 環境 において jQuery で クロスドメイン通信 する方法

今回、以下のサイトを参考にしました。

• 同一生成元ポリシー
• HTTP access control (CORS)
• IE10 の CORS for XHR
• クロスドメインへのアクセスが回避できるXMLHttpRequest2
• JavaScriptのクロスドメイン問題対応方法
• IE8 速攻徹底レビュー
• Access-Control-Allow-Origin試してみた。その２
• 十三章第一回　XMLHTTPRequest - JavaScript初級者から中級者になろう
• Same-origin policy for file: URIs

• visual pharm

最後に… このブログに興味を持っていただけた方は、 ぜひ 「Facebookページ に いいね！」または 「Twitter の フォロー」 お願いします！！

• Facebook ページ
• twitter