Question

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

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

值得一提的是，我正在托管我的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移动文档中使用手机空白时使用它

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

提前感谢您的帮助！

Answer 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/

Answer 2

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

Answer 3

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

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

 headers: { "cache-control": "no-cache" }

我希望这可以帮助别人，因为它一直很痛苦！

感谢您的回复

Answer 4

我对此问题的经验证明是由于我使用带有“无效”SSL证书的httpS这一事实。 iPhone移动safari和webview不信任SSL证书，因此没有提出AJAX请求。

我能够通过暂时使用普通HTTP来完成开发。

我的CORS标题是：

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

使用PhoneGap + jQuery Mobile中的ajax的CORS不在设备上工作，但在浏览器上

4 个答案: