web-dev-qa-db-ja.com

CORS、Cordova、AngularJs $ httpおよびfile：//混乱

リモートサーバー上のJSONサービスをポーリングするAngularJS/Cordovaアプリがあります。

$http({method: 'GET', url: 'http://example.com/index.php'})

ブラウザで開発し、イントラネットのApacheサーバー（http://dev）を実行します。「 'Access-Control-Allow-Origin'ヘッダーがありません」というメッセージが表示されるため、次のように追加して修正します。

Header set Access-Control-Allow-Origin "http://dev"

すべて正常に動作し、Chrome dev toolsにOrigin:http://devが表示されます。

だから、これについて初めて考えなければならないので、アプリがAndroid/iOSウェブビューで実行されたときのOriginはどうなるのだろうと思います。私は自分のデバイスでビルドとデプロイを行うことに決め、リモートデバッグ（iOSの場合はSafari、Androidの場合はWeinre）で同じエラーが発生することを期待していますが、驚いたことに（CORSヘッダーを送信しなくても）機能します！また、両方のデバイスで、アプリがfile：//スキームの下のwebviewで実行されていることもわかりました。電話OSによって提供されるある種のhttpサーバー（私が想定したもの）ではありません。

そのため、調査では、CORSはfile：//に必要ではないことが示唆されているようです-このような「サイト」は、任意のドメインの任意のXHRリソースにアクセスできます。しかし、デスクトップブラウザでこれをテストすると、Safariではファイル用のCORS ：//しかしChromeは機能し、FireFoxはCORSなしでどちらの方法でも機能します

だから私の質問：

1）Android/iOSでCORSなしでアプリが機能するのはなぜですか？CORSがfile：//に適用されないためですか？それとも、Cordovaがデバイスで機能させるために何かをしているのですか？

設定に<access Origin="*"/>があります

2）Q1への回答が保留されている場合、安全なサイトにいて、アプリからのリクエストを明示的に許可する必要がある場合、file：// "hosts"にAccess-Control-Allow-Originにどのような値を指定しますか？私のデバッグでは、file：//からのリクエストにOriginヘッダーがありません

3）リモートサーバーへのXHRリクエストをブロックすることに加えて、Chromeは私のアプリケーションテンプレートもブロックしています（私は個別のファイルを使用しています）。以下を参照してください。これは私のアプリケーションに潜在的な問題ですか？ 、またはChrome心配する必要のない問題ですか？

XMLHttpRequest cannot load file:///Volumes/projects/phonegap/www/templates/tabs.html. Cross Origin requests are only supported for HTTP.
javascriptajaxangularjscordovacors
18
KevInSol

CORSヘッダーがクロスドメインXHRを許可する必要があることを通知する方法は2つあります。

  • 送信Access-Control-Allow-Origin: *（すべてのホストを許可）
  • 許可するホストをバックエンドのOriginヘッダーに入れます

file://のURLと同様に、nullOriginが生成され、2番目のオプション（echo-back）。

として 言及 ：

クロスドメインポリシーはPhoneGapには適用されません（さまざまな理由により、基本的にはアプリがデバイス上のfile：// URIで実行されているためです）。

これらの外部ドメインにアクセスするには、アプリのホワイトリストを設定する必要があることに注意してください。

Chromeの問題については、開発者のコ​​ンソールで確認できます。

Failed to load resource: net::ERR_FILE_NOT_FOUND file:///C:/2.htmlXMLHttpRequest cannot load file:///C:/2.html. Received an invalid response. Origin 'null' is therefore not allowed access.

Chromiumプロジェクトの課題追跡、＃40787 についての議論がありました。彼らは問題を修正しないとしてマークし、その動作は設計上発生しているためです。

Chromeを--allow-file-access-from-files --disable-web-securityで開始して、開発目的でchromeのCORSをオフにするだけの回避策が提案されています

例えばWindows用

`C:\Users\YOUR_USER\AppData\Local\Google\Chrome\Application\chrome.exe --allow-file-access-from-files --disable-web-security`

コルドバに関連する回答がいくつかあります：

CORSの詳細については、以下のリソースを確認してください。

CORSのブラウザサポートも確認してください。

そして記録のために W3Cの正式なCORS仕様 :)

27
Blaise