【JavaScript】blocked by CORS policy エラーの簡単な解決法

たとえば Ajax とか XMLHttpRequest  とか Fetch API とか・・・

それで外部スクリプトを呼び出そうとすると起こるのが次のエラー

いわゆる CORSエラー と呼ばれてるもので、
複数のドメイン間でHTTP通信しようとしたときに起こるらしいです。

ここでは このCORSエラーの簡単な解決策 についてまとめました。

このCORSエラーはどんな時に起きる?

自分がこのエラーに遭遇したのはブログパーツを作ってた時

あるWebサービスを作っていて、その中で埋め込みHTMLをコピーしてもらってウィジェットを表示できるみたいなことがしたかった

▲ ブログパーツを作ったときの記事

 

そこで問題だったのが、次みたいに XMLHttpRequest  を使ってしまったこと

▼ レスポンスを返す側のスクリプト

これは自ドメインから呼び出せば問題なくレスポンスが返ってきます。

でも外部からブログパーツを表示しようとすると、コンソールで こういうエラー が出てしまいました、

なんだか長くて良く分からないエラー

でもこのエラーの中に解決策がしっかりと書いてあります。

解決策は Access-Control-Allow-Origin ヘッダーを付けること

この CORSエラー の解決策は実は簡単です。

それが  Access-Control-Allow-Origin をヘッダーに含めること

ちゃんとエラーメッセージにもこう書いてあります。

▼このエラーの日本語訳(by google翻訳)

ようするに Ajax とか Fetch とか XMLHttpRequest とか・・・
そういうのから Access-Control-Allow-Origin ヘッダーを送信しろということ

CORSエラー が起こらない通信の仕方は次の通りです。

 

まず XMLHttpRequest  とかで今まで通りに呼び出し

ここは別に修正する必要はないです。

修正するべきは呼び出される側のスクリプト
例えば次みたいに header  関数を呼び出してしまえばいいだけでした。

ハイライトした部分に注目

ただたんに header("Access-Control-Allow-Origin: *");  を送信してやればいいだけ

これだけでCORSエラーが解決できます。

ここまでのまとめ

以上、 has been blocked by CORS policy の解決策でした。

原因さえ分かれば 単純なエラーだったのでよかったです。ではまた