1. 経緯

ローカルの HTML で ES Modules を読み込もうとしたところ、次のエラーが発生しました。

Access to script at 'file:///…/js/index.js' from origin 'null' 
has been blocked by CORS policy
GET file:///…/js/index.js net::ERR_FAILED

2. 症状と原因

症状	主な原因
CORS エラー（`origin 'null'`）	`file://` 直読みで Origin が `null` になる

ポイント
ES Modules は HTTP/HTTPS で配信しなければならず、ファイル直読みはブロックされます。

Live Server 拡張をインストール
- VSCode 左側の拡張アイコン →「Live Server」を検索 → インストール
サーバーを起動
- index.html を右クリック → Open with Live Server
- ブラウザが http://127.0.0.1:5500 などで自動起動

ES Modules を読み込むには

HTTP/HTTPS 経由で配信する必要がある

ローカル開発では VSCode Live Server を使うのが最も簡単。

ファイル直読み (file://) は Origin が null になるため CORS でブロックされる。

ECMAScript の略称。JavaScript の正式仕様名です。

URL のスキーム（http/https）＋ホスト＋ポートの組み合わせを指す言葉で、ブラウザは「同じ Origin から読み込まれたかどうか」でアクセス制限（CORS）を行います。

file:// で開くファイルは Origin が null になるため、別ファイルをモジュールとして読み込もうとするとブロックされます。