Ajax通信でCORSに引っかかった時の対処法

環境情報

Google Chrome : Ver 84.0.4147.135

CORSとは

オリジン間リソース共有Cross-Origin Resource Sharing (CORS) は、追加の HTTP ヘッダーを使用して、あるオリジンで動作しているウェブアプリケーションに、異なるオリジンにある選択されたリソースへのアクセス権を与えるようブラウザーに指示するための仕組みです。

セキュリティ上の理由から、ブラウザーは、スクリプトによって開始されるオリジン間 HTTP リクエストを制限しています。例えば、 XMLHttpRequestや Fetch API は同一オリジンポリシーsame-origin policyに従います。つまり、これらの API を使用するウェブアプリケーションは、そのアプリケーションが読み込まれたのと同じオリジンに対してのみリソースのリクエストを行うことができ、それ以外のオリジンの場合は正しい CORS ヘッダーを含んでいることが必要です。

オリジン間リソース共有 (CORS) - HTTP | MDNより引用

CORS(オリジン管理ソース共有)については参考になる記事がたくさんあると思いますので、そちらを参考にしていただけたらと思います。

Ajax通信のエラー

デベロッパーツールのコンソールにはこのようなエラーが表示されてしまいます。
Access to XMLHttpRequest at 'https://zipcloud.ibsnet.co.jp/api/search?zipcode=1600002' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.


日本語訳すると、
「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の制限を解除してあげることが可能です。

具体的には、

1. ブラウザ起動時のプロパティでセキュリティーを解除する方法[^1]
2. CORS制限を無効化する拡張機能を追加する方法[^2]

があります。

[^1]: こちらの記事を参考ください。

[^2]: Chromeの拡張機能CORS Unblockを使えば、CORSエラーをブロックすることができます。

検証用などで一時的に制限解除したい場合にはこれらの方法が有効かもしれません。

セキュリティを甘くするのはちょっと。。という方は、以下の手段を講じる方がおすすめです。

無料ツールを使って、HTTPヘッダーを確認すべし

ラッコツールズさんのHTTPヘッダー確認ツールを使用することで、API提供者側がAccess-Control-Allow-Originを設定してくれているかどうかを確認することができます。

こちらからツールに進んで対象のURLを叩いてください。
HTTPヘッダー確認

HTTPヘッダーが確認できるので、Access-Control-Allow-Originに＊(ワイルドカード)が設定されているか確認しましょう！