【解説付き】chromeでXMLHttpRequestをローカルのファイルで行う方法

  • 69
    いいね
  • 0
    コメント

ローカルのファイルでは、XMLHttpRequestができない

ローカルファイルからAPIでをしようとすると、

Access-Control-Allow-Origin 

を理由に怒られて、所望のデータが取れない。
開発段階でローカルファイルで扱えないとなると相当不便だ。

クロスドメイン制約

セキュリティの問題上、そのHTMLファイルが置かれているドメインのサーバとしか通信できないという制約がある。
XMLHttpRequest Level 2で別のドメイン間でも通信できるようになった。

しかし、セキュリティ上webサーバがクロスドメイン制約をかけていることが多々ある。
webサービスにおいて、APIはサービス内でしか利用しないはずだし、外部から勝手にAPIを叩かれてデータの閲覧・改変をされては困る。

現状としてクロスドメイン制約はLevel 2が出た今でも意識する必要がある。

スクリーンショット 2015-06-16 18.55.05.png

開発における問題点

本番環境ではHTMLファイルは同一ドメイン上にある場合でも、開発段階ではモックサーバを使ってローカルファイルでAPIを叩くことになる。
そうすると本番環境で動くコードが開発段階では動かない。
スクリーンショット 2015-06-16 19.01.58.png
モックサーバのクロスドメイン制約を外しておくこともできるが、できればサーバの設定はそのままがいい。
どうしたものか。

解決方法

chromeのセキュリティを外して起動

Windowsの場合

chrome.exe --disable-web-security --user-data-dir

Macの場合

open /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir

で(ターミナルから)chromeを起動すれば、クロスドメイン制約に引っかからずにAPIを叩くことができる。

chromeを完全に終了させてからコマンドを叩く。

chromeが起動した状態で叩いても--disable-web-securityオプションは有効にならない。
スクリーンショット 2015-06-18 10.51.28.png
のように出ていれば成功。

なぜchromeの設定でクロスドメイン制約に引っかからなくなるのか

ずばり、クロスドメイン制約でアクセス制限をするのはブラウザだからである。

クライアントがアクセス制限を行う

サーバは設定によって、クロスドメイン制約を課すことができる。
その設定したクロスドメイン制約にもとづいてアクセスを制限するのはクライアント、すなわちブラウザである。

サーバはHTTP通信においてアクセス制限は行わない。

なので、chromeのオプションでweb-securityをdisableにして起動すれば、サーバにおいてクロスドメイン制約をかけていてもアクセスができるようになる。

ただし、文字通りweb-securityをオフにしているのでむやみにやるものではない。
あくまで開発時だけの方がいいだろう。