いろいろ~備忘録~

WEBエンジニアによる記録

勉強になったことを記録

Ajaxのクロスドメイン対策

Ajax通信する際、自分のへアクセスすることが多いと思います。
しかし、ブラウザに実装されているクロスドメイン制約により、Webページを生成したドメイン以外でHTTPリクエストはできません。
クロスドメイン制約とは、ブラウザの機能で、閲覧しているページのドメイン以外のドメインからはAjax通信をさせないという機能です。
今回、JQueryPHPで閲覧しているページのドメイン以外でもHTTPリクエストができる方法をまとめます。

JQueryプラグインを利用

JQueryプラグインを利用すれば簡単に実装ができるので、
以下からjquery.xdomainajax.jsをダウンロードします。
jquery.fn/cross-domain-ajax at master · padolsey-archive/jquery.fn · GitHub

ダウンロードが完了したらjquery.xdomainajax.jsをインクルードできたらjs側の実装は完了です。

Access-Control-Allow-Originを設定

次はPHP側の実装をします。
PHP側で以下のコードを追加することで、別ドメインからのアクセスを許可します。

header('Access-Control-Allow-Origin: *');

特定のドメインのみのアクセスを許可したい場合は以下のようにします。
※変数の設定も可能

header('Access-Control-Allow-Origin: http://sample1.jp http://sample2.jp');


以上で、閲覧しているページのドメイン以外のドメインからAjax通信が可能になります。

補足

Ajaxリクエストを送信するオプションの設定によってはブラウザの制約によりpreflightリクエスを行います。
preflightリクエストがうまくいかない場合はHTTPリクエストができなかったです。

参考サイト
dev.classmethod.jp
goma.pw