質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

3回答

15805閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

1クリップ

投稿2016/08/28 15:24

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

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 というような場合でもクロスオリジンの制約には引っかかるので注意です

投稿2016/09/28 05:06

編集2016/09/28 05:08
Chanmoro

総合スコア97

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

投稿2016/08/31 03:32

ojiboss

総合スコア38

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

投稿2016/08/28 15:44

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/08/28 16:47

試してみましたが、同じエラーでした。
退会済みユーザー

退会済みユーザー

2016/08/28 17:17

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

2016/08/28 17:28

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

退会済みユーザー

2016/08/28 17:35

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

2016/08/28 17:57

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の全てのプロセスを終了した後に起動してみてください。(管理者権限での起動も試してみてください)
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問