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 で配信しなければならず、ファイル直読みはブロックされます。
3. 解決策：VSCode Live Server を使う
-
Live Server 拡張をインストール
- VSCode 左側の拡張アイコン →「Live Server」を検索 → インストール
-
サーバーを起動
-
index.htmlを右クリック → Open with Live Server - ブラウザが
http://127.0.0.1:5500などで自動起動
-
4. まとめ
ES Modules を読み込むには
<script type="module"> が必須
HTTP/HTTPS 経由で配信する必要がある
ローカル開発では VSCode Live Server を使うのが最も簡単。
ファイル直読み (file://) は Origin が null になるため CORS でブロックされる。
補足：用語解説
ES
ECMAScript の略称。JavaScript の正式仕様名です。
Origin
URL の スキーム（http/https）＋ホスト＋ポート の組み合わせを指す言葉で、ブラウザは「同じ Origin から読み込まれたかどうか」でアクセス制限（CORS）を行います。
file:// で開くファイルは Origin が null になるため、別ファイルをモジュールとして読み込もうとするとブロックされます。