たとえば Ajax とか XMLHttpRequest とか Fetch API とか・・・
それで外部スクリプトを呼び出そうとすると起こるのが次のエラー
|
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エラーはどんな時に起きる？
自分がこのエラーに遭遇したのはブログパーツを作ってた時
あるWebサービスを作っていて、その中で埋め込みHTMLをコピーしてもらってウィジェットを表示できるみたいなことがしたかった
▲ ブログパーツを作ったときの記事
そこで問題だったのが、次みたいに XMLHttpRequest を使ってしまったこと
|
1 2 3 4 5 6 7 |
var xhr = new XMLHttpRequest(); xhr.open("GET","https://hoge.com/hoge.php"); xhr.onload = function(){ respText = xhr.responseText; console.log('respText : ', respText); } xhr.send(); |
▼ レスポンスを返す側のスクリプト
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?php /** レスポンスを返す */ ?> <!-- ウィジェットのHTML --> <div class="container"> <div class="row"> <div class="col-12"> ... </div> </div> </div> |
これは自ドメインから呼び出せば問題なくレスポンスが返ってきます。
でも外部からブログパーツを表示しようとすると、コンソールで こういうエラー が出てしまいました、
|
1 |
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 をヘッダーに含めること
ちゃんとエラーメッセージにもこう書いてあります。
|
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翻訳）
|
1 |
要求されたリソースに 'Access-Control-Allow-Origin'ヘッダーがありません。不透明な応答がニーズを満たす場合は、CORSを無効にしてリソースを取得するために、要求のモードを 'no-cors'に設定します。 |
ようするに Ajax とか Fetch とか XMLHttpRequest とか・・・
そういうのから Access-Control-Allow-Origin ヘッダーを送信しろということ
CORSエラー が起こらない通信の仕方は次の通りです。
まず XMLHttpRequest とかで今まで通りに呼び出し
|
1 2 3 4 5 6 7 |
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 関数を呼び出してしまえばいいだけでした。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?php /// Access-Control-Allow-Originエラーを回避する header("Access-Control-Allow-Origin: *"); ?> <!-- ウィジェットのHTML --> <div class="container"> <div class="row"> <div class="col-12"> ... </div> </div> </div> |
ハイライトした部分に注目
ただたんに header("Access-Control-Allow-Origin: *"); を送信してやればいいだけ
これだけでCORSエラーが解決できます。
ここまでのまとめ
以上、 has been blocked by CORS policy の解決策でした。
原因さえ分かれば 単純なエラーだったのでよかったです。ではまた
