Phonegap 跨域 AJAX POST 请求在 Android 上不起作用

Question

跨域 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);
   }
});

为解决此问题而采取的步骤：

• 域白名单 - 配置.xml

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

<access origin="*" />

• 告诉jQuery允许跨域

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

• 禁用缓存cache: false

任何帮助，不胜感激。

Answer 1

好的。

如果 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);
   }
});

Answer 2

如果您想解决此问题，那么您可能希望确保插件已正确包含在构建过程中。

RESOURCE: appconfig.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: appconfig.xml
<widget>
     ...
     <feature name="http://api.phonegap.com/1.0/network"/>
     ...
</widget>

Answer 3

使用

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

而不是 data: {identity: <username from form>, password: <password from form>}

当我像这样更改代码时，我收到了成功消息。

Answer 4

有时您的域中存在问题。就我而言，我通过将以下代码放入我的 .htaccess 文件来解决它

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>