JavaScriptでcsvを読み込んで配列に格納したい

Question

質問は表題の通りです。参考にしたサイト
自分なりに色々と調べてみましたが、どうしてもXMLHttpRequest()を使うようです。これを使うのはいいのですが、エラーが出てきます。以下です。

エラー
responce.js:35 Access to XMLHttpRequest at 'file:///Users/koko/Desktop/resultBag.csv' 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.

これの解決方法としてもセキュリティーの設定をオフにしないといけないみたいなことが書かれていました。
ただセキュリティーをオフにするのは少し抵抗があります。

そして単純にcsvの内容を配列に格納するだけなのにめんどくさいことをしないといけないのでしょうか。
もっと簡単にできないでしょうか。

Comments

[nerianighthawk]

このプログラムはローカルで実行しているのでしょうか？
どちらにせよ、ローカルの
/Users/koko/Desktop/resultBag.csv
を参照しに行っています。
どういう環境でプログラムを実行しているのか記載いただかないと、回答が難しいです。

[oika77]

ローカルで実行しています。

[nerianighthawk]

ローカルサーバを立てているような状況ですか？
それとも、HTMLのスクリプトタグで埋め込み、ブラウザで実行しているような状況でしょうか？

[oika77]

あまり詳しくなくて、言葉足らず申し訳ありません。HTMLのスクリプトタグで埋め込みをしていて、クロームで表示させようとしています。

Answer 1

urlの先頭がfileになっているので、fileプロトコルを利用しています。

ローカル(file:///)上で外部ファイル読み込みのセキュリティ制約を回避するいくつかの方法

今やろうとしていることは上記の記事と同じことだと思いますが、この記事の最後に書かれている「ローカルでWebサーバを動かす」が一番簡単な方法になるかと思います。

PCのOSによって手軽にサーバーを立てる方法は、自分で少し調べてみるのがいいかなと、わからなければ再度別の質問を立ててみるのもありかと思います。(その場合は、OSなどの情報、どういう手順でサーバーを構築しようとして、どういうところでつまづいたなどの情報があると回答がつきやすいです。)

Comments

[oika77]

自分でサーバーを立てることができました。ご回答ありがとうございました。

Answer 2

状況を把握できたため、回答します。
まず、XMLHttpRequest()は通常のネットワークの通信によってファイルを取得します。
さらに file:///Users/koko/Desktop/resultBag.csv というのはローカルファイルを指定します。
これは、ネットワーク上にサーバがあったとしても、そのページを表示すると、表示しているPCのローカルのファイルを参照しに行くことになります。
これがセキュリティチェック無しでOKにしてしまうと大変なことになることになります（サーバを立てている人が無差別に攻撃できてしまいます）。

今回の場合は、HTMLにスクリプトタグを書いてChromeで実行しているとのことなので、一時的であればセキュリティを許可してしまうことは問題ないと思います。
一方で、サーバを立てることを想定している場合は、そのサーバ内にファイルを入れて、そのサーバのurlを指定してあげればいいかと思います。
ローカルでサーバを立てて試したい場合は以下のサイトが参考になるかと思います。
お手軽なWebサーバーの立て方

Comments

[oika77]

色々と詳しくありがとうございます。最終的にはweb server for chromeを使ってうまく出力させることができました。