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: *

何らかのサイトが 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;

関連情報

• CORS のエラー
• 用語集: CORS
• CORS 入門