jsの練習中Chromeでcross-orignエラーが出た。

Question

Vue.jsの練習中にjsonファイルを読み込むプログラムを書いたら
chrome側のjsのコンソールに

Access to XMLHttpRequest at 'file:///C:/Users/USER/Desktop/vuejs/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, https.

というエラーが出力され困っています。

ネットで調べてみたところ外部からの静的ファイルなどを読み込む制限（CORSエラー）が効いているらしく。
chromeの起動オプションを設定する、具体的にはショートカットのリンクに

--allow-file-access-from-files --disable-web-security --user-data-dir --disable-features=CrossSiteDocumentBlockingIfIsolating

を設定してあげる必要があるみたいですが、肝心な設定方法が分かりません。
ご存じの方がいらっしゃいましたらご協力お願いいたします。

Answer 1

XHRではhttpdを通さないローカルファイルへのアクセスはできません
http(s)経由でファイルへアクセスしてください

Comments

[shoco]

XHRについて調べました。
ローカルファイルへのアクセスはできないんですね...
初歩的な質問で失礼しました。

Answer 2

肝心な設定方法が分かりません。

Chromeでしか動かないものでなければ、Firefoxから起動することで回避することも考えられます。

file://以下へのXHRがどう動くかは、ブラウザによって大きく異なってきます（Qiita）。

Answer 3

httpサーバをインストールすれば、XMLHttpRequest でhttoアクセス可能となります。

1. httpサーバをインストール
2. ブラウザで http://127.0.0.1/ を開く
3. XMLHttpRequest が機能する

• (http-サーバ | Web-サーバ) インストール - Google 検索

Answer 4

yambejpさんのご回答で全てではありますが、
質問本文にも記載あります、起動オプションの付け方は、下記の記事に記載の方法でいけるかと思います。

起動オプション - Google Chrome まとめWiki

古めの記事かと思われますが、
Windowsの方法は間違いなく今でも行われている方法です。
（Macの方はわからない、未検証）

ただし、現在のChromeって、とにかくセキュリティうるさいので、
オプションをつけてもCORSエラー回避はできないかもしれません・・・。