ローカル環境で html/JavaScript を書いている機会が増えて、色々と詰まったところがあったので覚書をしておきます。

ローカルファイルを読み込むコードの実行が失敗する

本来はネットワーク越しで取得するデータですが、開発中はサーバを用意していないのでローカルにおいたファイルを読み込みたい、というのはよくある話かと思います。そんなコードやライブラリを利用した時に、ブラウザで実行すると以下の様なエラー（Chrome の場合）が発生します。

blob:null/eda21915-d416-4aba-a766-49d5af8a12c1:1 Access to XMLHttpRequest at ‘file:///Users/XXXXXXXX/yyyyyy.json’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

つまるところ、CORS ポリシーによりアクセスが拒否された状態です。こうなってしまうと実際にデータを読み込むことができないし、かといってそのためだけにサーバを用意するのも手間です。

解決策

Live Server を利用する

一番手頃なのがこちら。ただし、Visual Studio Code を利用している場合に限ります。
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

手順は非常にシンプルで、Visual Studio Code の拡張機能で『Live Server』を検索しインストールします。あとは、実行したい html ファイルを開いて Visual Studio Code の下部にあるメニューバーの「Go Live」をクリックするだけで OK。あとはブラウザで localhost でページが表示される様になります。

さらに右クリックメニューにも「Open with Live Server」という項目が追加されているので、ファイルエクスプローラーから直接対象の html ファイルを指定することも可能です。