AjaxのクロスドメインエラーをPHPでのCORSヘッダ設定で回避する

AjaxのクロスドメインエラーをPHPでのCORS(Cross-Origin Resource Sharing)ヘッダ設定で回避する方法です。

久しぶりにAPIを開発していたのですが、Ajaxを利用してアクセスすると、以下のようなエラーになってしまいました。

Google Chromeでは

Access to XMLHttpRequest at 'http://BBB/api/xxx.json?xxx=xxx' from origin 'http://AAA' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Firefoxでは

クロスオリジン要求をブロックしました: 同一生成元ポリシーにより、http://BBB/api/xxx.json?xxx=xxx にあるリモートリソースの読み込みは拒否されます (理由: CORS ヘッダー ‘Access-Control-Allow-Origin’ が足りない)。[詳細]

AAAというサーバからAjaxで、BBBというサーバのAPIにアクセスしたときに、上記のようなエラーが発生します。
これはブラウザのセキュリティ機能によるもので、CORSヘッダがセットされていないので異なるサーバのデータは取得できない、といったことがエラーメッセージとして出力されています。

ブラウザにプラグインなどを追加してセキュリティを解除するよう設定したり、JSONPを用いるなど、クライアントサイドで回避する方法もありますが、今回はサーバサイドでの回避方法のご紹介です。

HTTPヘッダの仕様としてCORSヘッダというものがありますが、その中で「Access-Control-Allow-Origin」をレスポンスにセットしてあげると、この問題を回避できます。

サーバサイドAPIのPHPレスポンス処理に、以下のように追加するだけです。

...
header("Access-Control-Allow-Origin: *");
echo $json;

再びAjaxでアクセスすると、エラーは発生せず、無事データを取得できるようになりました。

セキュリティ的には設定にもう一工夫が必要なようですが、取り急ぎデータアクセスエラーの回避方法でした。