質問: こんにちは Windows Server側でASP.Netで簡単なWebAPIを実装し、クライアント側(Cordova)でJavaScriptを使用してリクエストを投げようとしています。 WebAPIの実装はでき、ブラウザからhttp://IPアドレス/api/HealthValuesを実行すると正常に実行でき、結果が返ってきますが、Cordova内のJavaScriptから実行すると以下のようにエラーとなってしまいます。 > > XMLHttpRequest cannot load http://IPアドレス/api/HealthValues. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '' is therefore not allowed access. > > > いろいろ調べてみましたが、クロスドメインとなりブラウザのセキュリティ的に問題のある実装というような内容ばかりで、どのように解決するのが良いのかわかりません。 やりたいことはTwitterAPIのようにAPIを叩くとJSONでデータが返ってくるようなものをクライアントサイドから使いたいです。 手探りで作成しているため実装方法自体が間違っているかどうかの判断ができていません。 どなたか経験ある方にアドバイスいただければと思います。 参考までにクライアントサイドのコードを記載します。 ``` return $http.get('http://IPアドレス/api/HealthValues', {params: params}).then(function(response) { return response.data; }); ``` 環境を追記します。 ・Cordovaバージョン: 6.0.0 ・対象とするplatform: 現在はbrowserで検証していました。最終的にはios, androidになります。 ・実行環境: クライアント:Mac OS X ElCapitan、サーバー:AWS EC2
回答: 質問する際は環境を詳細に記載すると良いかと思います。 ・Cordovaバージョン ・対象とする`platform` ・実行環境 本題ですが、 `Cordova5.x.x`より`CSP(ContentSecurityPolicy)`の記述が必須となりました。 おそらくWhiteListを記載されていないのではないでしょうか? 新しいバージョンの`cordova`ですと、最初から`cordova-plugin-whitelist`がプラグインとして入っているかと思います。 1つ目はHTMLに下記METAを追加します。 ``` ``` 2つ目は`config.xml`に`access-allow`を追加します。 ``` ``` また、これらを追加しても`Browser`を対象としたアプリの場合、 Chromeなどのブラウザの制約に縛られることもあります。 その場合は各ブラウザの仕様を確認してください。 (セキュリティ関係を無効にする起動オプションがあるブラウザもあるので) 質問文から読み取れることはコレくらいでしょうか? 追記:許可対象が`*`なので全て許可していますが、本当はアプリから接続先を明確にして必要なページのみ許可するほうが良いです......。