このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
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;