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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

実際にCROSエラーが起こらない通信の仕方は次の通り

 

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

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

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

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

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

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

ここまでのまとめ

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

原因さえ分かれば、意外と単純だったのでよかったです。ではまた

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください