サーバー PHP

Ajaxを使うとAccess-Control-Allow-Originエラーが発生

Access-Control-Allow-OriginエラーでAjaxが動かなくなる

少し前までは通常に使えてたAjaxが急に動かなくなりました。

エラー内容を見てみると

XMLHttpRequest cannot load http://kaede.jp/***.php Origin https://kaede.jp is not allowed by Access-Control-Allow-Origin.

というエラーが発生していました。

Access-Control-Allow-OriginエラーはAjaxにて別ドメイン（クロスドメイン）のデータを取得する際、別ドメインのヘッダー情報にAccess-Control-Allow-Origin情報がないと実行できないようになったようです。

別ドメインならまだしも同一ドメインでもSSLとそうじゃない場合だとエラーになるようです。

httpsのサイトからhttpsのサイト情報を取得するとエラーになるとは……

解決方法

解決策としては二つ

phpにAccess-Control-Allow-Originを埋め込む

PHPのheader関数に「Access-Control-Allow-Origin」ヘッダー情報を埋め込めばOK

header('Access-Control-Allow-Origin:https://kaede.jp');//特定ドメインのみ許可する場合
header('Access-Control-Allow-Origin:*');//全ドメイン許可する場合

ただし、これだと画面増えるたびにPHPにヘッダーを埋め込まないといけないので少々面倒

サイト全体にAccess-Control-Allow-Originを埋め込む

NginxやApacheなどWebサーバの設定でヘッダーを追加すればOK

nginxの場合

server{
	#特定ドメインのみ許可する場合
	add_header Access-Control-Allow-Origin https://kaede.jp;
	#全ドメインを許可する場合
	add_header Access-Control-Allow-Origin *;
	・
	・
	・
}

Apacheの場合

<Virtualhost :80>
・
・
・
<Directory>
#特定ドメインのみ許可する場合
Header set Access-Control-Allow-Origin "https://kaede.jp"
#全ドメインを許可する場合
Header set Access-Control-Allow-Origin ""
・
・
・
</Directory>
</Virtualhost>

これでエラー発生することなく取得することができると思います。

相手のサーバーにAccess-Control-Allow-Originヘッダー情報がない場合はphp等を噛ましてローカルで読み込ますようにしないといけないですね。

【2021/10/23追記】Access-Control-Allow-Origin:*はお勧めしない

最近の脆弱性診断ででは「Access-Control-Allow-Origin:* 」にすると指摘事項として挙げられる場合があります。

その場合は 「Access-Control-Allow-Origin」 ヘッダーにドメイン情報を明記するか 「Access-Control-Allow-Origin」ヘッダーを削除すればよいようです。

昔は「 Access-Control-Allow-Origin 」を削除すれば「 Access-Control-Allow-Origin :*」と同じでしたが、
今はオリジナルドメインのみ許可と同様になるようです。

-サーバー, PHP
-, , ,