基礎から学ぶ Vue.jsのP83【外部からデータを取得する】で下記エラーが発生。
解決したので記載します。

発生したエラー

Access to XMLHttpRequest at 'file:///Users/〇〇/Desktop/JS/list.json' 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.

この記事が役に立つ方

・上記エラーを解消されたい方

環境

- OS: macOS Monterey 12.5
- Vue.js: 下記CDNを利用　
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
- axios: 下記CDNを利用
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

解決

1.ターミナルを立ち上げ、ソースがある場所へcdコマンドで移動。
2.http-server を使って簡単に静的ファイル用のローカルサーバーを立てます。

コマンド実行。

npx http-server

以下、移動したディレクトリ内のファイルにアクセスできる静的サーバーが立ち上がります。

Need to install the following packages:
  http-server
Ok to proceed? (y) y
Starting up http-server, serving ./

http-server version: 14.1.1

http-server settings: 
CORS: disabled
Cache: 3600 seconds
Connection Timeout: 120 seconds
Directory Listings: visible
AutoIndex: visible
Serve GZIP Files: false
Serve Brotli Files: false
Default File Extension: none

Available on:
  http://xxx.0.0.1:8080
  http://xxx.xxx.xxx.xxx:8080
Hit CTRL-C to stop the server

-o オプションをつければサーバー立ち上げと同時にブラウザでページを開きます。

npx http-server -o

表示されました。

どなたかのお役に立てれば幸いです。