質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.99%

Chromeでcsvを開きたい

解決済

回答 4

投稿

  • 評価
  • クリップ 1
  • VIEW 6,120

IsseiMorita

score 21

前提・実現したいこと

jqueryでプログラムを書いています。ajaxでcsvファイルを読み込みたいのですが。Choromeではうまくいきません。
ChromeでAjaxを用いてcsvファイルを読み込みたいと思っています

発生している問題・エラーメッセージ

XMLHttpRequest cannot load file:///D:/test/Book1.csv. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.send @ jquery-1.12.3.min.js:4

該当のソースコード

<!DOCTYPE html>
<html>
<head>
<!-- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> -->
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">
    <title>テスト用です</title>
    <meta charset="utf-8" />
  <style>
  html{
    position: relative;
    font-size: 24pt;
  }

  </style>
</head>
<body>
  <div id="click">
    クリックしてください
  </div>
  <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
  <script src="js/jquery.jrumble.1.3.min.js"></script>
  <script>
    $('#click').click(function () {
      $.ajax({
        url: 'Book1.csv',
        dataType : 'text',
        beforeSend : function(xhr) {
          xhr.overrideMimeType("text/html;charset=SJIS");
      //    xhr.overrideMimeType("text/html;charset=Shift-JIS");
        },
        success:function (data) {
          $(this).text(data);
        }
      });
    });
  </script>
  <!-- <script src="js/Main.js"></script> -->
</body>
</html>

試したこと

調べたところ --allow-file-access-from-filesが必要らしいのですがどこに書けばいいのかわからりませんでした。

補足情報(言語/FW/ツール等のバージョンなど)

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4

checkベストアンサー

+3

基本的にブラウザで開いたWEBページからローカルのファイルをパス指定して開くことは禁止されています。なぜなら、悪意ある人が作ったWEBページを見るだけでローカルにあるファイルの情報が取られてしまう脆弱性に繋がるからです。
さて、--allow-file-access-from-filesはその脆弱性を許容してブラウザを起動するオプションです。これは、他の人のブラウザをページからどうこうするのではなく、自分のブラウザの起動のときに指定するものです。

ajaxでcsvファイルを読み込みたい

理由はわかりませんが、もし自分だけが使うのなら既に使えることがわかっているブラウザで開くか、ローカルにWEBサーバーを立ててそこ置き、そこのURLを指定して渡すのがいいのかなと思います。

しかし、Chromeにこだわっているということは一般公開して使いたいということでしょう。
でしたら、input[type='file']でファイルデータ取得し、FileReaderで処理するか、または、そのデータを一度サーバーにアップロードしPHPなどで中身を処理しjsonデータなどで戻してもらうというプロセスが必要になるかと思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

-allow-file-access-from-filesが必要らしいのですが

Windows か Mac かでも設定の仕方が違いますが、いくつか参考ページを挙げておきます。

【Windows版chromeでローカルファイルに直接アクセスする方法[オレ得JavaScriptメモ] | 56DOC BLOG】
http://blog.56doc.net/Entry/809/

【[*その他*] ChromeにてAjaxでローカルファイルにアクセス - Qiita】
http://qiita.com/cigalecigales/items/33afaa42f91542ffa62e

【【小ネタ】Chromeのローカルセキュリティポリシーの回避 | Developers.IO】
http://dev.classmethod.jp/etc/chrome-localfile-security/

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

http://www.finefinefine.jp/howto/kiji861/

↑を参考にされると良いかと。
ただ、ソレはローカルで開く場合の話なので、根本解決には至りません。
たしか、getなどをするときのファイルの種類をjsonpで指定して、取得するとクロスドメイン回避出来た記憶があります。
(違ったらごめんなさい、やってみてください)

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

お使いのOSがWindowsだと想定して回答します。

Chromeのショートカットのプロパティを開き、リンク先のところに次のようにしてオプションを追加するとクロスドメイン制約を解除できます。

変更前:

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe"

変更後:

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --user-data-dir="<ユーザーデータを保存するディレクトリ>" --disable-web-security

セキュリティ機構に穴をあける行為なので、あくまで開発用ということで。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.99%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる