[JavaScript] Chrome上でAjaxを使ってローカルファイルにアクセスする方法

  • 1
    いいね
  • 0
    コメント

はじめに

以下のコードを用いて、Chrome上でjQueryからAjaxを試していた時のバグとその対処法についてです。

$(function() {
    $.get("file.html", function(data) {
        // 成功時の処理
    })
})

環境

  • Windows 10
  • jQuery 3.2.1

問題

上記のコードでAjaxを試そうとすると、
"Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https."
というエラーメッセージが出てきました。
調べたところ、chromeのセキュリティ上の問題でこうなっているらしいです。

対処法

以下の順番に操作してください。
1. Chromeを閉じる
2. chrome.exeファイルを探す
(僕の場合は、「C:\Program Files (x86)\Google\Chrome\Application\chrome.exe」にありました)
3. コマンドプロンプトから以下を実行

cd C:\Program Files (x86)\Google\Chrome\Application
chrome.exe --allow-file-access-from-files