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

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

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

Access to fetch at 'https://example.com/hoge.php' from origin 'http://outer.example.com/' has been blocked by CORS policy

1	Access to fetch at 'https://example.com/hoge.php' from origin 'http://outer.example.com/' has been blocked by CORS policy

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

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

このページの目次

このCORSエラーはどんな時に起きる？
解決策は Access-Control-Allow-Origin ヘッダーを付けること
ここまでのまとめ

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

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

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

PisukeCode - Web開発まとめ

ブログパーツの JavaScrip・PHP による作り方まとめ【サンプル付き】

https://pisuke-code.com/web-ways-to-make-blogparts

小さなWebサービスを今開発してます。そんなとき少しでもサービスを広めたくて、ブログパーツを作ってみました。「ブログパーツとか難しそうだな～」と思ってたんですが、意外と作るのは難しくなかったし、作ってみると意外と楽しいです。ということで、PHP+JavaScriptによるブログパーツの作り方を紹介！まず大まかな作り方のロードマップについて今回作るブログパーツ、こういう使い方を想定してます。埋め込みできる感じのウィジェットなるべく表示速度に負荷をかけないコードコピペで表示するイメージ身近なところでいうな...

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

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

var xhr = new XMLHttpRequest();
xhr.open("GET","https://hoge.com/hoge.php");
xhr.onload = function(){
  respText = xhr.responseText;
  console.log('respText : ', respText);
}
xhr.send();

var xhr = new XMLHttpRequest();

xhr.open("GET","https://hoge.com/hoge.php");

xhr.onload = function(){

respText = xhr.responseText;

console.log('respText : ', respText);

}

xhr.send();

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

<?php
/** レスポンスを返す */
?>

<!-- ウィジェットのHTML -->
<div class="container">
  <div class="row">
    <div class="col-12">
    ...
    </div>
  </div>
</div>

<?php

/** レスポンスを返す */

...

</div>

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

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

Access to fetch at 'https://hoge.com/hoge.php' from origin 'http://outer.example.com/' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Access to fetch at 'https://hoge.com/hoge.php' from origin 'http://outer.example.com/' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

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

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

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

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

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

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

 No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

1	No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

▼このエラーの日本語訳（by google翻訳）

要求されたリソースに 'Access-Control-Allow-Origin'ヘッダーがありません。不透明な応答がニーズを満たす場合は、CORSを無効にしてリソースを取得するために、要求のモードを 'no-cors'に設定します。

1	要求されたリソースに 'Access-Control-Allow-Origin'ヘッダーがありません。不透明な応答がニーズを満たす場合は、CORSを無効にしてリソースを取得するために、要求のモードを 'no-cors'に設定します。

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

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

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

var xhr = new XMLHttpRequest();
xhr.open("GET","https://hoge.com/hoge.php");
xhr.onload = function(){
  respText = xhr.responseText;
  console.log('respText : ', respText);
}
xhr.send();

var xhr = new XMLHttpRequest();

xhr.open("GET","https://hoge.com/hoge.php");

xhr.onload = function(){

respText = xhr.responseText;

console.log('respText : ', respText);

}

xhr.send();

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

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

<?php

/// Access-Control-Allow-Originエラーを回避する
header("Access-Control-Allow-Origin: *");

?>

<!-- ウィジェットのHTML -->
<div class="container">
  <div class="row">
    <div class="col-12">
    ...
    </div>
  </div>
</div>

<?php

/// Access-Control-Allow-Originエラーを回避する

header("Access-Control-Allow-Origin: *");

...

</div>

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

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

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

ここまでのまとめ

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

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

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

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

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

ここまでのまとめ

関連記事

プロフィール

人気記事

検索してみる