2017.3.27
2020.1.7

クロスドメインでの開発でエラーが出た場合の対応

JSONファイルを読み込もうとして呼び出す側と呼び出される側の環境がクロスドメインとなる場合、以下のようなエラーが出力されます。

XMLHttpRequest cannot load http://localhost/example.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

上記は呼び出し側がNodeJS、呼び出される側がApacheの環境だった場合にブラウザのコンソールに出力されたエラーログです。以前、呼びされる側がSinatra(Ruby)だった場合のやり方はメモしたので、今回はApache版になります。

コード

対応自体は簡単で、「.htaccess」に以下の設定を追加します。


Header set Access-Control-Allow-Origin "*"

上記の場合は「*」でアクセスがあったものすべてが許可されますが、制限する場合は以下のようにします。


Header set Access-Control-Allow-Origin "http://localhost:3000"

以前にも似たような対応をやったのですぐに解決すると思ったらブラウザのキャッシュが残っていて、何度やってもうまくいかずに時間だけが無情にも過ぎていくという状態になりました。完全に初歩的なミスですが、気を付けましょう...

Apache】関連記事