自作の API サーバから JSON を取得する際に、CORS ポリシーでブロックされる場合

カテゴリ：REST API

自作の API サーバから Ajax で JSON を取得したいのに、取得されていない。Webブラウザの開発ツールで確認すると以下のようなエラーが出力されている事があります。

Access to XMLHttpRequest at 'http://xxxxx' from origin 'http://xxxxx' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

対処法としてはエラー内に記述されているように API サーバ側に「Access-Control-Allow-Origin」レスポンスヘッダを追加する必要があります。 具体的には以下を記述します。

PHP：

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');

JSP：

<%
response.setHeader("Access-Control-Allow-Origin","*");
response.setHeader("Access-Control-Allow-Headers","Origin, X-Requested-With, Content-Type, Accept");
%>

Access-Control-Allow-Origin とは？

「Access-Control-Allow-Origin」はWebブラウザに異なるオリジンへのアクセスを許可するための設定です。 値に「*」を指定した場合、Webブラウザに対してすべてのオリジンからのリソースへのアクセス（リクエスト）を許可している事を示します。

Access-Control-Allow-Headers とは？

「Access-Control-Allow-Headers」はWebブラウザにアクセスを許可するリクエストヘッダを指定します。 カンマ区切りで複数のヘッダを指定できます。 上記のサンプルで指定している各リクエストヘッダの意味は以下となります。

公開日時：2023年05月28日 11:39:03
最終更新日時：2023年05月31日 13:20:34