web-dev-qa-db-ja.com

PhonegapクロスドメインAJAX POSTリクエストが機能しないAndroid

クロスドメインAJAX POSTリクエストは、携帯電話のブラウザーを含むWebブラウザーでは完全に正常に機能しますが、Phonegap

ユーザーがログイン認証情報を入力する必要があるログインフォームを作成しました。その後、herokuでホストされているサーバーによって認証され、有効な認証情報が入力された場合にjson {"success":true}が返されます。

私のAjaxスクリプト：

$.ajax({
   type: "POST",
   url: "http://domain.com/public/auth/app-login",
   contentType: "application/x-www-form-urlencoded; charset=utf-8",
   dataType: "json",
   data: {identity: <username from form>, password: <password from form>},
   crossDomain: true,
   cache: false,
   success: function(data) {
       obj = JSON.parse(data);
       if (obj && obj.success === true) {
          window.location.href = 'home.html';
       }
   },
   error: function(e) {
       alert('Error: ' + e.message);
   }
});

この問題を解決するために取られた手順：

<access Origin="http://domain.com/public/auth/app-login" />

<access Origin="*" />

  • クロスドメインを許可するようjQueryに指示する

$.support.cors = true; OR jQuery.support.cors = true;

  • キャッシュを無効にするcache: false

どんな助けでもありがたいです。

androidjqueryajaxcordovacross-domain
11
h4kl0rd

OK。 index.htmlがローカルの場合、任意のホストでajaxを呼び出すことができ、クライアントまたはサーバーでCORSを有効にする必要はありません。あなたは削除します：

$.support.cors = true; OR jQuery.support.cors = true;

そして：

<access Origin="http://domain.com/public/auth/app-login" />

それは冗長です、使用するだけです：

<access Origin="*" />

チェックしてAndroidManifest.xmlに追加する必要があります。

<uses-permission Android:name="Android.permission.INTERNET" />

アプリが必要な場合は、さらに権限を追加します。最後に、$（document）.ready（）内でajaxを呼び出します。

$.ajax({
   type: "POST",
   url: "http://domain.com/public/auth/app-login",
   dataType: "json",
   data: {identity: <username from form>, password: <password from form>},
   success: function(data) {
     obj = JSON.parse(data);
     if (obj && obj.success === true) {
        window.location.href = 'home.html';
     }
   },
   error: function(e) {
     alert('Error: ' + e.message);
   }
});
7
Hanh Le

この問題の解決を検討している場合は、プラグインがビルドプロセスに適切に含まれていることを確認してください。

RESOURCE: \app\config.xml
<widget>
    .... [lots of stuff] ....
    <gap:plugin name="com.indigoway.cordova.whitelist.whitelistplugin" />
    <access Origin="http://*" />
    ....
</widget>

また、推奨されるバージョンを指定することもできますが、上記では指定しません。プラグインが含まれているかどうかをテストする良い方法は、 https://build.phonegap.com/apps で提供される無料のクラウドアカウントを使用することです。そこでプロジェクトをビルドする場合は、[プラグイン]タブをチェックして、ホワイトリストプラグインが含まれていることを確認できます。

これは、HTMLページのHEAD要素でのみ必要であると読みましたが、この投稿の日付現在、プラグインを含める必要があることがわかりました。

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

プラグインがロードされていない場合、jQueryの$.ajaxメソッドをエラー文字列に使用すると、「見つかりません」エラーが発生する可能性があります。

インターネット上の情報の一部には、ホワイトリスト情報が/www/res/フォルダーに配置されていると記載されていますが、これは古い情報のようです。いくつかの例では<plugin...が使用されていることもありますが、これは古い方法であると思われますか？

また、次のものが必要になる場合があります。

RESOURCE: \app\config.xml
<widget>
     ...
     <feature name="http://api.phonegap.com/1.0/network"/>
     ...
</widget>
4
kmcguire

使用する

JSON.stringify(data: {identity: <username from form>, password: <password from form>})

の代わりに data: {identity: <username from form>, password: <password from form>}

このようにコードを変更すると、成功メッセージが表示されました。

1
Sonia John Kavery