CORSエラー

こんにちは！アイサット研修担当です！
今回はCORSエラーに遭遇したお話をしようかと思います！

起きた現場

HTMLのサンプル用にべた書きHTMLファイルを作っていました。フッターをつけるべくフッター用のHTMLファイルを別に作り、JavaScript（jQuery）でload関数を使いフッターHTMLを読み込む、というものです。
IDEのプレビューでは何の問題なく動作しました、完成！と思ったのもつかの間。ローカル環境でファイルを直接叩いてブラウザを起動した際、フッターを読み込まなかった。コンソールを確認すると、

Access to XMLHttpRequest at 'パス/footer.html' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.

Failed to load resource: net::ERR_FAILED

というエラーが。どうやらこれはCORSエラーというものらしい。

CORSエラーとは

「Cross-origin resource sharing」の頭文字をとり、CORSエラーというもの。異なるオリジン（Cross-origin）のリソースへのアクセスに関してということですね。オリジンとはリソース自身の「スキーム」「ホスト」「ポート」の組み合わせ。つまり現在見ているWebページのオリジンから見てこれらが一致しているということが同一のオリジンということになります。ざっくりいうとスキームとは「https」などの箇所、ホストはホストネーム（ドメインの箇所）、ポートは「80」などのポート番号になります。

つまりCORSエラーとは、異なるオリジンへのアクセスを制限するために起きるエラーです。クロスサイトリクエストフォージェリーなどの対策になっています。

仕組みと対策

リクエストにはオリジンの情報が含まれています。そのオリジンを許可するレスポンスヘッダを付与すれば、異なるオリジンでもアクセス可能になります。
今回起きた現象はローカル環境でたたいた場合ですが、ローカルサーバーだと問題なく動きます。まあ同一オリジンだから当然ですね。JavaScriptで非同期通信を使う際にも注意が必要、ということですね。