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

解决此问题的步骤：

Domain whitelisting - config.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: \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>

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>

Phonegap跨域AJAX POST请求无法在Android上运行

4 个答案: