CORSってなんだっけ…？

※随時アップデート予定

CORSとは

CORS(オリジン間リソース共有)とは、
異なるオリジン間で通信をする際に通信元が許可されている相手であれば通信を可能にする仕組み

オリジン：プロトコル + ドメイン + ポート番号
例: https(プロトコル)://yahoo.co.jp(ドメイン):443(ポート番号)

下記パターンでの通信は制約が入り、通信ができない。

• ローカルファイル(file://)プロトコル
• 許可されていない別オリジンへの通信

エラーパターン

ローカルのHTMLファイルから読み込みでエラー

Access to script at 'ファイルパス' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.

なぜ起こる？

エラーメッセージを和訳

オリジン「null」から「ファイルパス」のスクリプトへのアクセスは、CORS ポリシーによってブロックされました: クロスオリジンリクエストは、プロトコル スキーム: http、data、isolation-app、chrome-extension、chrome、https、chrome-untrusted でのみサポートされます。

ローカルファイルにアクセスする(file://)プロトコルから別オリジンリソースへのアクセスは禁止されてる
プロトコル スキーム: http、data、isolation-app、chrome-extension、chrome、https、chrome-untrusted
上記がCORSで通信許可されるプロトコル。
なので通信するならローカルサーバを立ててHTTPで接続する必要あり。

参考