251
239

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2015-06-16

#ローカルのファイルでは、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をオフにしているのでむやみにやるものではない。
あくまで開発時だけの方がいいだろう。

251
239
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
251
239

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?