【PHP】Ajax通信でクロスドメインエラーをPHPで回避するには？

php

JSONファイルを利用してデータの読み込みと追加をするために、JavascriptとphpをAjaxで連携しようとした際にクロスドメインエラーが出たのでその対処法を簡単にメモ。

Ajaxによる別ドメインへのアクセスに関して

だいたい連携させる場合は、同じドメインにファイルを置くので意識していなかったのですが、今回はVue CLIでlocalhost環境で作業していて、phpファイル自体は自分のサーバーにアップしていました。

ただ別ドメインへファイルをアップしていたので、以下のようなエラーが出てしまいました。

Access to XMLHttpRequest at ‘https://the-zombis.sakura.ne.jp/wp_plactice_file/php/data.php’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

Ajaxを利用する場合は取得したいファイルが 同一ドメイン上に存在していないとデータの送受信が行えないという制約がありました。巷でいうクロスドメイン問題ってやつですね。

何が原因なのか？

上記のようなエラーを見るとCROSというキーワードが出てきます。

CORSとは？ ざっくりいうと【Cross Origin Resourse Sharing】の略で Ajaxなどで異なるドメイン間で通信する場合の安全に行われるような規約といったところでしょうか。

つまりエラーの内容はCORSによって、http://localhost:8080からdata.phpへのアクセスは許可されてないよーって注意されちゃってるようなもんでしょうか。

別ドメインへのアクセスを許可するには？

どうやったら別ドメインへのアクセスが許可されるのかというとPHP側で許可してあげる方法があります。

header関数でヘッダ情報（ Access-Control-Allow-Origin）をセットしてあげる

PHPにはHTTPのヘッダ情報を送信するために使用するheader関数があるのですが、そこにヘッダー情報のひとつである【 Access-Control-Allow-Origin 】をセットして特定のドメインからのリクエストを許可しますというのを指定してあげればいいでしょう。
また特定のドメインだけでなく全てのリクエストを許可する場合は、*ワイルドカードを指定する事も可能です。


//特定のドメインからのリクエストを許可
header("Access-Control-Allow-Origin: http://localhost:8080");

//すべてのドメインからのリクエストを許可
header("Access-Control-Allow-Origin: *");

まとめ

以上のようにAjaxでPHP側と通信した際に異なるドメイン間で発生したエラーは解消されました。大抵は同じドメインで通信取るのであまりこういった機会はないかもですが覚えておいて損はないかなと。