基礎から学ぶ 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
表示されました。
どなたかのお役に立てれば幸いです。