ローカルPCでHTMLファイルを作成しサイトデザインする際、データをjsonファイルなどで外部ファイル化しておき、AjaxとJavaScript、jQuery($.getJSON)を利用して効率よくレイアウトを構成することがあります。
しかし上記のような場合、ブラウザのセキュリティ制約にひっかかりファイル読み込みがブロックされていしまい、意図した通り動作しないことがあります。
DevToolsでConsoleログを確認すると以下のようなメッセージが表示されていると思います。
「jquery-2.2.4.min.js:4 Access to XMLHttpRequest at ‘file:///C:/Users/XXXX/Desktop/jsonTest/data.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.」
ブラウザのセキュリティ制約を回避して、ローカル上でも外部ファイルの読み込みを正常に動作させる方法をご紹介します。
Contents
環境
・OS：Windows
・ブラウザ：Chrome
やり方
Chromeの場合、以下の方法で外部ファイルの読み込みを行えるようになります。
Chromeのショートカットを作成
１．[Chrome]のインストールまで移動します。
２．[chrome.exe]のショートカットを作成します。
[プランA]–allow-file-access-from-files を起動オプションに設定
１．作成したショートカットのプロパティを表示します。
２．リンク先に[chrome.exe]のフルパス(“C:\Program Files (x86)\Google\Chrome\Application\chrome.exe”)が表示されているので、
末尾に「 –allow-file-access-from-files」を追記します。
３．追記した後、「OK」ボタンを押下します。
４．作成したショートカットでchromeを起動することで、ローカルのHTMLで外部ファイルを読み込むことが出来ます。
※chromeがすでに起動している場合、一旦chromeを落としてから再起動してください。
[プランB]–disable-web-security –user-data-dir を起動オプションに設定
１．作成したショートカットのプロパティを表示します。
２．リンク先に[chrome.exe]のフルパス(“C:\Program Files (x86)\Google\Chrome\Application\chrome.exe”)が表示されているので、
末尾に「–disable-web-security –user-data-dir」を追記します。
３．追記した後、「OK」ボタンを押下します。
４．作成したショートカットでchromeを起動することで、ローカルのHTMLで外部ファイルを読み込むことが出来ます。
※chromeがすでに起動している場合、一旦chromeを落としてから再起動してください。
[注意]こちらの場合、以下のようにメッセージが表示されます。
「サポートされていないコマンドラインフラグ –disabled-web-security を使用しています。これにより、安全性とセキュリティが損なわれます。」
管理者権限の設定（必要に応じて）
上記のショートカットを作成することで既に動作できると思うが、もし動かないという場合は管理者権限を設定して起動してみてください。
１．ショートカットのプロパティを表示する。
２．「詳細設定」ボタンを押下する。
３．「管理者として実行」チェックボックスにチェックを入れる。
４．「OK」ボタンを押下する。
「–allow-file-access-from-files」の解説
デフォルトでは禁止されている、file:// URIからの他のfile:// URIの読み込みを許可します。
ローカルでWebページの動作確認を行ったり、HTML形式のドキュメントを参照する際などに必要となる場合があります。
英文、英単語としてはそれぞれ以下の通りです。
allow-file-access-from-files：ファイルからのファイルアクセスを許可する
allow：許可
file：ファイル
access：アクセス
from：から
files：ファイル