#環境情報
Google Chrome : Ver 84.0.4147.135
#CORSとは
オリジン間リソース共有Cross-Origin Resource Sharing (CORS) は、追加の HTTP ヘッダーを使用して、あるオリジンで動作しているウェブアプリケーションに、異なるオリジンにある選択されたリソースへのアクセス権を与えるようブラウザーに指示するための仕組みです。
セキュリティ上の理由から、ブラウザーは、スクリプトによって開始されるオリジン間 HTTP リクエストを制限しています。例えば、 XMLHttpRequestや Fetch API は同一オリジンポリシーsame-origin policyに従います。つまり、これらの API を使用するウェブアプリケーションは、そのアプリケーションが読み込まれたのと同じオリジンに対してのみリソースのリクエストを行うことができ、それ以外のオリジンの場合は正しい CORS ヘッダーを含んでいることが必要です。
CORS(オリジン管理ソース共有)については参考になる記事がたくさんあると思いますので、そちらを参考にしていただけたらと思います。
#Ajax通信のエラー
デベロッパーツールのコンソールにはこのようなエラーが表示されてしまいます。
日本語訳すると、
「Origin 'http://localhost:8080' から 'https://zipcloud.ibsnet.co.jp/api/search?zipcode=1600002' へのXMLHttpRequestアクセスは CORS ポリシーによってブロックされました。要求されたリソースには 'Access-Control-Allow-Origin' ヘッダーが存在しません。」
これは、WebAPIを提供してくれているサーバーでAccess-Control-Allow-Originが設定されていないために起こるエラーです。
##Access-Control-Allow-Originとは
Access-Control-Allow-Origin レスポンスヘッダーは、指定されたオリジンからのリクエストを行うコードでレスポンスが共有できるかどうかを示します。
Access-Control-Allow-Origin - HTTP | MDNより引用
Webサーバから送信されたHTTPレスポンスヘッダーの一つです。
このレスポンスヘッダーはHTTPリクエストに対するレスポンス側。
つまり、WebAPIの提供者側からしか操作することができません。
したがって、API提供側がHTTPのレスポンスヘッダーにAccess-Control-Allow-Originを設定してくれない限り、このエラーは解決されません。
※ちなみに、
Access-Control-Allow-Origin：Originのドメイン名 または ＊(ワイルドカード)
となっていれば、HTTPリクエストのレスポンスを受け取ることができます。
##拡張機能やブラウザの設定でAccess-Control-Allow-Originを無視することもできる
CORS すなわち オリジン間HTTPリクエストはGoogle Chrome等のブラウザにより制限されています。
なので、実際にはブラウザのセキュリティ機能を変更してあげることでCROSの制限を解除してあげることが可能です。
具体的には、
があります。
検証用などで一時的に制限解除したい場合にはこれらの方法が有効かもしれません。
セキュリティを甘くするのはちょっと。。という方は、以下の手段を講じる方がおすすめです。
#無料ツールを使って、HTTPヘッダーを確認すべし
ラッコツールズさんのHTTPヘッダー確認ツールを使用することで、API提供者側がAccess-Control-Allow-Originを設定してくれているかどうかを確認することができます。
こちらからツールに進んで対象のURLを叩いてください。
HTTPヘッダー確認
HTTPヘッダーが確認できるので、Access-Control-Allow-Originに＊(ワイルドカード)が設定されているか確認しましょう！
-
Chromeの拡張機能**CORS Unblock**を使えば、CORSエラーをブロックすることができます。 ↩