CORS（Cross-Origin Resource Sharing）エラーの対処方法→同一オリジン設置orヘッダー許可

今回は、javascriptおよびそれ系ライブラリで通信しているときに発生しがちな『CORS（Cross-Origin Resource Sharing）エラー』について取り上げます。管理人が明確に覚えているケースは、2つありました。早速CORSの定義を確認し、エラーに対処してみましょう。

CORSエラーとは？当サイト管理人が遭遇したケースは？

CORS（Cross-Origin Resource Sharing）

ネットの用語で同一オリジンポリシー (same-origin policy)っていうのがあるんですけど、『二つのページのプロトコル、ポート番号、ホストが等しい場合は同一オリジンとみなす』というような考え方です。他のオリジンにあるリソースへのアクセス方法を制限したりします。

この同一オリジンポリシーに反して、別オリジンよりリソース読み込み時に出るのが、CORS（Cross-Origin Resource Sharing）エラーです。javascriptのXMLHttpRequestやFetch APIのような機能は、特にこの影響をうけます。

オリジン間リソース共有 (CORS)
https://developer.mozilla.org/ja/docs/Web/HTTP/CORS

同一オリジンポリシー
https://developer.mozilla.org/ja/docs/Web/Security/Same-origin_policy

管理人遭遇ケース１：サーバー上jsonに、ローカルからvue&axiosでアクセス

ローカルで作っていて、このサイトのドメインが割り当ててあるサーバー上のリソースに、vue&axiosでアクセスしました。『blocked by CORS policy』という表示がコンソールに出ています。

ホスト名が基本的に『localhost』となるので、外部サーバー上のリソースも基本的に同一オリジン以外という判定になりそうですね。

管理人遭遇ケース２：ローカルからFetch APIでRSSを取るとき

こちらもローカルで、先日Fetch APIでRSSを取るというのをやっていたんですけど、最初は表示しませんでした。

上のケースとちょっとエラー文章が違いますが『Access-Control-Allow-Originヘッダーが無いよ』とのことです。これで2通りの対処方法が想定されました。

CORSエラーに対処した方法

同一オリジンになるように、リソース取得先と同じサーバーにアップ

これは一番簡単です。同じサーバー・同じドメインのディレクトリに入れてしまえば、同一オリジンとみなされるので、CORSエラーはでません。

.htaccessファイルでAccess-Control-Allow-Originヘッダをセットする

ケース２のメッセージでAccess-Control-Allow-Originヘッダーという項目が出てきたので、リソース取得先（このコラムサイトです）の.htaccessファイルで、Access-Control-Allow-Originヘッダーを設定しました。

基本的に外部に対して公開されている情報であれば『*』で全部許可できます（後悔したくない情報がある場合は、アクセスコントロールを別途設定します）。

また、『Header set Access-Control-Allow-Origin "アクセスを許可するオリジンurl"』のように書くことができます。

あとがき・まとめ

まとめると、こんなところでしょうか。最近フロントで取ってくるみたいなのも作っていたので、押さえられてよかったです。