3

こんにちは

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 'http://localhost:8100' 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

1
  • WhiteListの追加はどうなっていますか?
    – user10259
    Commented 2016年6月14日 2:11

1 件の回答 1

1

質問する際は環境を詳細に記載すると良いかと思います。
・Cordovaバージョン
・対象とするplatform
・実行環境

本題ですが、
Cordova5.x.xよりCSP(ContentSecurityPolicy)の記述が必須となりました。
おそらくWhiteListを記載されていないのではないでしょうか?
新しいバージョンのcordovaですと、最初からcordova-plugin-whitelistがプラグインとして入っているかと思います。

1つ目はHTMLに下記METAを追加します。

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">

2つ目はconfig.xmlaccess-allowを追加します。

<access origin="*" />
<allow-intent href="*" />
<allow-navigation href="*" />

また、これらを追加してもBrowserを対象としたアプリの場合、
Chromeなどのブラウザの制約に縛られることもあります。
その場合は各ブラウザの仕様を確認してください。
(セキュリティ関係を無効にする起動オプションがあるブラウザもあるので)

質問文から読み取れることはコレくらいでしょうか?


追記:許可対象が*なので全て許可していますが、本当はアプリから接続先を明確にして必要なページのみ許可するほうが良いです……。

1
  • 丁寧に教えていただきありがとうございます。iosのエミュレータで無事に動きました。browserではやはりクロスドメインの制約に引っかかり動かないようです。開発時はbrowserの方が効率が良いのでサーバー側のHTTP Response HeaderでAccess-Control-Allow-Originを許可して開発することにしようと思います。
    – raimtoon
    Commented 2016年6月14日 2:49

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。