2

所以我正在使用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>

我在这里先向您的帮助表示感谢！

4

4 回答 4

2

最简单的尝试是使用以下内容扩充您的 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 请求。

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

于 2013-01-24T19:47:58.327 回答
0

I've encountered cases where Access-Control-Allow-Origin: * was actually ignored by the client. I believe the "proper" way (see the w3c spec to confirm this) to allow all domains via CORS is to actually grab the origin domain from the request header, then dynamically apply that origin to the Access-Control-Allow-Origin header of the response, rather than using the wildcard character, to ensure that the client will respect the header.

于 2013-01-24T19:56:01.993 回答
0

Okay so it turns out there wasn't an issue with the code. It seemed that the app was cacheing the error result or something. I killed the app and relaunched it and all works fine now. From reading around it seems iOS6 safari caches POST which is different to previous versions.

I have added this in my ajax call to prevent caching the POST.

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

I hope this helps someone else as it has been a pain!

Thanks for the replies

于 2013-01-25T12:35:38.947 回答
0

My experience with this issue proved to be caused by the fact that I was using httpS with an "invalid" SSL certificate. iPhone mobile safari and webview did not trust the SSL certificate and so did not make the AJAX request.

I was able to complete development by temporarily using plain HTTP.

My CORS headers were:

Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: X-Requested-With,Authorization
于 2013-07-20T19:38:48.620 回答