【XMLHttpRequest】ajaxで非同期通信できずにエラーになってしまう
例えば、ページを読み込むときに他の.jsonや.htmlファイルを読み込みたいときがあります。そういうときはaxiosやjQueryなどでajax非同期通信をする必要があります。
そういったときにhtmlを書きローカル環境（file:///~）でページを表示するとエラーメッセージが出てきて読み込んでくれない場合があります。
ダブルクリックなどでhtmlファイルをブラウザで開くとエラー
（所属中のサークルのサイト）
Access to XMLHttpRequest at '{{ファイル名}}' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https. というエラーが出て読み込めない
それもそのはず、ローカル環境ではセキュリティ上ajax通信ができないようになっているからです。回避方法はいくつかありますが、どれも設定が複雑で初心者にはとっつきづらいのではないかと思います。
目次
簡単な解決方法
そこでワンクリックでXMLHttpRequest 関連のエラーを回避し、htmlを見ることができる方法があります。
この解決法の必須ソフトは
- Visual Studio Code(以下VSCode)
- VSCodeの拡張機能 live server
です。
VSCodeにある拡張機能にlive serverというものがあります。ローカルホストでサーバーを開き、見たいhtmlファイルをサーバー上で見るものです。
Live Serverについての詳しい説明はこちら。
Live Serverのインストール方法
VSCodeを起動し、左側にあるメニューから拡張機能を開き、Live Serverをインストールします。
インストールに成功したら、VSCodeでワークスペースを作成します。
ワークスペースとは、VSCode上で複数のファイル・フォルダを管理するための環境です。
参考：
ワークスペースを使うとフォルダ内のファイルの行き来がしやすくなったりします。
自分の作成しているhtmlファイルのあるディレクトリにワークスペースを作成し、環境を整えましょう。
「Go Live」ボタンでローカルサーバーを立ち上げる
ワークスペースをVSCodeで開いているときに右下に「Go Live」というボタンが表示されます。これをクリックすればローカルサーバーが起動し、自身のページがブラウザで表示されます。この機能を使えばXMLHttpRequestを行うことができ、エラーが発生しなくなります！
まとめ
- ローカル環境(file:///~)ではhtmlから他のファイルを読み込むという処理はできない
- VSCode の拡張機能「Live Share」が簡単
- 使うときはワークスペースについて把握しておくとなおよい
ありがとうございました。
