Ajax利用時にローカルファイルがCORSエラーになった時の対応

2659 ワード
CORS Ajax jQuery jQuery テキストリンク

発生した経緯

初歩の初歩で入門編の参考書をみながら勉強しており、
Ajaxでローカルファイルを呼ぼうとしたらとしたがCORSポリシーエラーになって失敗した。

前提

  • ブラウザでローカルファイル（html）を表示させただけ。
  • 使用ブラウザはchrome。
  • OSはmac。

エラー内容

Ajaxを動かした結果、以下のようなエラーが出た

'[ファイル名]' from origin 'null' has been bloc
ked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https

CORS policy ???

ざっくりすぎるCORS policy

CORSとは

Cross-Origin Resource Sharing (オリジン間リソース共有)
オリジンの構成要素はスキーム、ホスト、ポート。

例えば

①　http://qiita.com/users?char=A
②　http://qiita.com/users?char=B
③　http://qiita.com/users?char=C:80
④　http://qiita.com/users?char=D:8080

①〜③はスキーム(http)、ホスト(qiita.com)、ポート(:80)が同じ（８０番ポートは既定)なので同一オリジンと言える。
④はポートが違うため別のオリジン。

CORS policy とは

CORS policy (同一オリジンポリシー)
一言で言うとセキュリティのために同一オリジンからしか取得しませんっていう制約。
今回はchromeからローカルファイルサーバにアクセスしようとしたのでこの制約に引っかかったったいねー。

対応方法

色々あるが一番簡単(ソースへの加筆等が不要)なのはブラウザ起動時にCORSを許可してしまうこと。
つまり、別オリジンからもアクセスできるようにしてしまうこと。

chromeを終了して（not 閉じて）

以下のコマンドをterminal等から実施する

open -a Google\ Chrome --args -allow-file-access-from-files

ブラウザの上の方に警告文がでる。
で、Ajaxでローカルファイルを呼ぶと...呼べる！！

注意点

つまり、別オリジンからもアクセスできるようにしてしまうこと。

今回はローカルに閉じた話ですが外部からのアクセスを許可してしまっているのでセキュリティはガバガバです。
他人のPCや共有PC使用時には注意が必要です。
もちろん、社用PCでちょっとお勉強してますという人も要注意です。

我々初歩の人間には分からない脅威がごまんとあります。
詳しい方に聞きましょう。
そして自分の知見も増やしちゃいましょう。

詳細を知りたい方は

chromeじゃなくてmozillaのサイト(これがわかりやすかった)
https://developer.mozilla.org/ja/docs/Web/HTTP/CORS