Reason: CORS request not HTTP

エラーの原因

CORS リクエストは URL スキームが HTTPS の場合のみ利用できますが、リクエストで指定された URL が異なる種類のものです。 これは、ローカルファイルを指定する URL が、 file:/// スキームを使用している場合によく起こります。

この問題を修正するには、CORS が関わるリクエスト、例えば fetch()、XMLHttpRequest、ウェブフォント (@font-face)、WebGL textures、XSL スタイルシートなどを発行させるには、必ず HTTPS の URL を使用してください。

ローカルファイルの読み込み

同じディレクトリーおよびサブディレクトリーにあるローカルファイルは、以前は同一オリジンから取得されたものとして扱われていました。 つまり、テスト中にファイルとそのリソースすべてを、CORS エラーが発生することなく、ローカルディレクトリーまたはサブディレクトリーから読み込むことができたということです。

残念ながら、この問題にはセキュリティ上の問題があり、勧告（CVE-2019-11730）で指摘されています。 Firefox や Chrome を含む多くのブラウザーは現在、（既定では）すべてのローカルファイルを不透明なオリジンとして扱います。 その結果、ローカルリソースが含まれたローカルファイルを読み込むと、CORS エラーが発生します。

テストをローカルで実行する必要がある開発者は、ローカルサーバーを構築する必要がでてきました。 すべてのファイルが同じスキームとドメイン (localhost) から提供されるため、すべて同じオリジンを持ち、オリジン間エラーは発生しません。

関連情報

• CORS のエラー
• CORS 入門
• URL とは