11

跨域 AJAX POST 请求在 Web 浏览器（包括手机浏览器）上运行良好，但不适用于使用构建的本机应用程序Phonegap

我创建了一个登录表单，用户必须输入他们的登录凭据，然后由托管在 heroku 上的服务器进行验证，{"success":true}如果输入了有效的凭据，则返回 json。

我的 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; 或者 jQuery.support.cors = true;

  • 禁用缓存cache: false

任何帮助表示赞赏。

4

4 回答 4

7

好的。如果 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);
   }
});
于 2013-09-26T01:41:13.270 回答
4

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

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'">

如果未加载插件，则在使用$.ajaxjQuery 方法获取错误字符串时可能会收到“未找到”错误。

网上有些资料会告诉你，白名单信息是放在/www/res/文件夹里的，但是这似乎是过时的信息。您可能还会发现<plugin...在某些示例中使用了 that，但似乎这可能是一种过时的方式？

此外，您可能需要：

RESOURCE: \app\config.xml
<widget>
     ...
     <feature name="http://api.phonegap.com/1.0/network"/>
     ...
</widget>
于 2015-10-07T18:54:49.830 回答
1

利用

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

代替 data: {identity: <username from form>, password: <password from form>}

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

于 2015-04-21T05:06:32.450 回答
-1

Some time there is issue in your domain. In my case I resolved it by putting following code in my .htaccess file

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>
于 2015-11-26T13:43:20.333 回答