在 PhoneGap+jQuery Mobile 中使用 ajax 的 CORS 无法在设备上运行，但在浏览器上运行

Posted 2023-05-09

【中文标题】在 PhoneGap+jQuery Mobile 中使用 ajax 的 CORS 无法在设备上运行，但在浏览器上运行

【英文标题】：CORS using ajax within PhoneGap+jQuery Mobile not working on device but is on browsers

【发布时间】：2013-01-08 15:58:56

【问题描述】：

所以我正在使用 Phone Gap 和 jQuery mobile 构建一个应用程序。

当使用 ajax 从白名单服务器获取 json 响应时，我收到错误响应。但是，控制台中没有显示任何内容。奇怪的是，当在网络浏览器中测试应用程序时它工作正常，只有当我启动到我的 iPhone 设备时，它才会抛出一个 strop。

现在值得一提的是，我托管我的 php 脚本的网站在 Phone Gap 中被列入白名单。我在数组中使用 * （以防万一这会有所不同）。 我已经为此制定了一个 jsonp 解决方法，但不想使用它 - 我觉得如果它在浏览器中工作，它必须在设备上是可能的。我希望这是一个简单的修复...

这是我的简单 php 脚本，它只是回显了一个 json 字符串。

<?php
header('Access-Control-Allow-Origin: *');
$arr = array('a' => 1, 'b' => 2);
echo json_encode($arr);
?>

这里是 JS

    $('#registerUser').submit(function() 
          $.ajax(
                 url: 'http://www.mydomain.co.uk/path/register/add_user.php',
                 type: 'post',
                 dataType: 'json',
                 crossDomain : true,
                 timeout: 5000,
                 success: function(msg)
                    alert(msg.a);
                 ,
                 error: function()
                    alert('There was an error loading the data.');
                 
                 );
          );
    );

编辑：我在页面上也有这个 js...在 jquery mobile docs 上建议在使用 Phone Gap 时使用它

        <script>
        $( document ).on( "mobileinit", function() 

            $.mobile.allowCrossDomainPages = true;
            $.support.cors = true;
        );

        </script>

还有表格——我认为没有必要……

           <form id='registerUser' action="" method="POST">
                <div data-role="fieldcontain">
                    <label for="name">Name:</label>
                    <input type="text" name="name" id="name" value=""  />
                    <label for="name">Email:</label>
                    <input type="text" name="email" id="email" value=""  />
                    <label for="name">Password:</label>
                    <input type="password" name="password1" id="password1" value=""  />
                    <label for="name">Re-enter password:</label>
                    <input type="password" name="password2" id="password2" value=""  />
                    <br>
                    <button type="submit" aria-disabled="false">Submit</button>
                </div>
            </form>

提前感谢您的帮助！

【问题讨论】：

能否附上您收到的错误信息？

ajax 函数中的错误信息。不是特定的 js 错误。

【参考方案1】：

尝试最简单的方法是使用以下内容扩充您的 PHP 服务器：

<?php
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET,PUT,POST,DELETE');
header('Access-Control-Allow-Headers: Content-Type');
$arr = array('a' => 1, 'b' => 2);
echo json_encode($arr);
?>

您还需要确保您的 PHP 服务器允许 OPTIONS HTTP 请求。

更长的答案是您的 JS 代码中的 dataType: 'json' 正在触发 CORS 预检请求。预检请求基本上要求服务器允许发出实际请求。您可以在此处了解有关 CORS 预检的更多信息：http://www.html5rocks.com/en/tutorials/cors/

【讨论】：

嘿。我尝试添加那些额外的标题，但没有奏效。仍然在 ajax 请求中遇到错误语句。

【参考方案2】：

我遇到过Access-Control-Allow-Origin: * 实际被客户端忽略的情况。我相信通过CORS允许所有域的“正确”方式（参见the w3c spec to confirm this）实际上是从请求标头中获取源域，然后将该源动态应用于响应的Access-Control-Allow-Origin标头，而不是使用通配符，以确保客户端尊重标头。

【讨论】：

我该怎么做？

【参考方案3】：

好的，事实证明代码没有问题。似乎该应用程序正在缓存错误结果或其他东西。我杀死了该应用程序并重新启动它，现在一切正常。从周围阅读看来，ios6 safari 缓存 POST，这与以前的版本不同。

我在我的 ajax 调用中添加了这个以防止缓存 POST。

 headers:  "cache-control": "no-cache" 

我希望这对其他人有帮助，因为它一直很痛苦！

感谢回复

【讨论】：

我也遇到了同样的问题，你能看看这里吗：***.com/questions/22582456/…

【参考方案4】：

我在这个问题上的经历被证明是由于我使用带有“无效”SSL 证书的 httpS 造成的。 iPhone 移动 safari 和 webview 不信任 SSL 证书，因此没有发出 AJAX 请求。

我能够通过临时使用纯 HTTP 来完成开发。

我的 CORS 标头是：

Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: X-Requested-With,Authorization