ファイルを読み込む html/JavaScript をローカル環境で実行したかった件

プログラム

ローカル環境で 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 ファイルを指定することも可能です。

コメントはまだありません

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

プログラム
AWS 利用料支払いをクレジットカードで出来なかった件

とある昼下がりの午後(だったかは定かではない)に一通のメールが届きました。 タイトルはこんな感じです …

プログラム
既存のローカルプロジェクトを GitHub に移行する時にハマったメモ

現在ローカルで作成中のウェブアプリ(Rails アプリ)を GitHub でバージョン管理しようと思 …

サービス開発
1
御朱印地図 Web アプリ『ごしゅつい』をとりあえずリリース!

以前に「将来的に Web アプリ作りたい」と言っていた、御朱印情報とマップを融合させたサービスをとり …