Chromeのクロスドメイン制約に引っかかる

Question

XMLHttpRequest cannot load localhost:3000/api/posts. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

という風なエラーがでます。調べたところ、Chromeのセキュリティを下げて起動させることで、正常にデータが取得できるようですが、できませんでした。以下の方法です。

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

原因がさっぱりわかりません。一番わからないのは、同様なアプリがあるのですが、それは正常に動作します。そのアプリとの違いはほとんどないように思えるのですが。

Answer 1

Chrome のセキュリティを解除するには --disable-web-security、 --user-data-dir の2つの引数をつける必要があります
以前のバージョンでは --disable-web-security だけを付ければよかったのですが、Chromeのバージョン49以降に仕様が変わったようです

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

クロスオリジンの制約は、ブラウザのアドレスバーに表示される URL と javascript からアクセスする URL を比べて、
プロトコル、ドメイン、ポート のどれかが違えば別のオリジンということになります

なので、ドメインが同じでも片方だけ https だったり、ポート番号が違う場合は別のオリジンと判断されます
例えば、Web ページは http://localhost 、API は http://localhost:8080 というような場合でもクロスオリジンの制約には引っかかるので注意です

Answer 2

正常に動作する同様のプログラムはAPIサーバ側で特別な事はしていませんか？
サーバ側（APIサーバ）でレスポンスヘッダに "Access-Control-Allow-Origin" に、リクエストのヘッダーにあるオリジンを加えてみてはどうでしょう？

Answer 3

file://localhost:3000/ など、ローカルのファイルへのアクセス時のことでしょうか。それであれば下記のような解決方法があるようです。

【[その他] ChromeにてAjaxでローカルファイルにアクセス - Qiita】
http://qiita.com/cigalecigales/items/33afaa42f91542ffa62e

$ sudo /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --args -allow-file-access-from-files

Comments

[退会済みユーザー]

試してみましたが、同じエラーでした。

[kei344]

「http://localhost:3000/api/posts」というURLでしょうか？それともエラー文に出ているように「localhost:3000/api/posts」というURLを使われていますか？

[退会済みユーザー]

両方試してみましたが、変化はありませんでした。

[kei344]

状況がわからないため確認したつもりなのですが･･･。ローカルにおいたHTMLからローカルのファイル（例えば file://path-to-file/text.txt ）を読み込むものを提示していますが、それ以外の状況と言うことでしょうね。

[退会済みユーザー]

説明不足で申し訳ありません。
現在の状況としては、APIサーバを用意しており、そこにローカルにおいたHTMLからhttpリクエスト行い、データを取得していると言った感じです。

[kei344]

「http://localhost:3000/api/posts」は有効なURLですか？
質問文に書かれているエラーは「http, httpsとか以外のプロトコルはクロスオリジンできません」という趣旨の文章なので、「http://localhost:3000/api/posts」を投げてエラーが出る場合文章が変わるはずなのですが、再度確認ください。

「--disable-web-security」で正しく起動し、httpプロトコルで通信すればいいと思います。

【【解説付き】chromeでXMLHttpRequestをローカルのファイルで行う方法 - Qiita】
http://qiita.com/growsic/items/a919a7e2a665557d9cf4
> ※chromeを完全に終了させてからコマンドを叩く。
> chromeが起動した状態で叩いても--disable-web-securityオプションは有効にならない。

こういう情報もあるので、Chromeの全てのプロセスを終了した後に起動してみてください。（管理者権限での起動も試してみてください）