Reason: CORS header 'Access-Control-Allow-Origin' missing
理由
Reason: CORS header 'Access-Control-Allow-Origin' missing
エラーの原因
CORS リクエストへのレスポンスが、リソースが現在のオリジン内で操作しているコンテンツによってアクセスできるかどうかを判断するために使われる、必須の Access-Control-Allow-Origin
ヘッダーを欠いています。
サーバーを自分で制御できる場合は、リクエストしているサイトのオリジンを Access-Control-Allow-Origin
ヘッダーの値に追加して、アクセスが許可されているドメインの一覧に追加してください。
例えば、https://example.com
のサイトが CORS を使用したリソースにアクセスできるよう許可するためには、ヘッダーを以下のようにしてください。
Access-Control-Allow-Origin: https://example.com
*
ワイルドカードを使用することで、あらゆるサイトにアクセスを許可するようサイトを構成することもできます。これは公開 API にのみ使用してください。非公開の API には *
を使用するべきではなく、代わりに具体的なドメインやドメインの一覧を設定してください。加えて、ワイルドカードは crossorigin
属性が anonymous
に設定されたリクエストにのみ動作し、リクエストでは Cookie のような資格情報の送信を抑制します。
Access-Control-Allow-Origin: *
警告: ワイルドカードを使用して、非公開の API へのアクセスをすべてのサイトに許可することは、悪い考えです。
何らかのサイトが CORS リクエストを *
ワイルドカードを使用することなく (たとえば資格情報を有効にする場合) 利用できるようにするには、サーバーにリクエストの Origin
ヘッダーの値を読み取り、その値を Access-Control-Allow-Origin
に設定することに加えて、一部のヘッダーがオリジンに応じて動的に設定されることを示すために Vary: Origin
ヘッダーを設定する必要があります。
一般的なウェブサーバーでの例
ウェブサーバーによって、ヘッダーを設定するための正確なディレクティブは異なります。
下記の例では、
Apache(ドキュメントはこちら)では、サーバー構成(適切な <Directory>
, <Location>
, <Files>
, <VirtualHost>
節内)に以下の行を追加します。構成は通常、.conf
ファイル(一般的な名前は httpd.conf
や apache.conf
です)または .htaccess
ファイルにあります。
Header set Access-Control-Allow-Origin 'https://example.com'
Nginx(ドキュメントはこちら)では、このヘッダーをセットアップするコマンドは次の通りです。
add_header 'Access-Control-Allow-Origin' 'https://example.com' always;