在 PhoneGap+jQuery Mobile 中使用 ajax 的 CORS 无法在设备上运行，但在浏览器上运行 [英] CORS using ajax within PhoneGap+jQuery Mobile not working on device but is on browsers

问题描述

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

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

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

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

 1, 'b' => 2);回声 json_encode($arr);?>

这里是JS

 $('#registerUser').submit(function() {$.ajax({url: 'http://www.mydomain.co.uk/path/register/add_user.php',类型:'帖子'，数据类型:'json'，跨域:真，超时:5000，成功:功能(味精){警报(msg.a)；},错误:函数(){alert('加载数据时出错.');}});});});

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

 <脚本>$( 文档 ).on( "mobileinit", function() {$.mobile.allowCrossDomainPages = true;$.support.cors = true;});

还有表格 - 我认为没有必要...

 
<div data-role="fieldcontain"><label for="name">名称:</label><input type="text" name="name" id="name" value=""/><label for="name">电子邮件:</label><input type="text" name="email" id="email" value=""/><label for="name">密码:</label><input type="password" name="password1" id="password1" value=""/><label for="name">重新输入密码:</label><input type="password" name="password2" id="password2" value=""/><br><button type="submit" aria-disabled="false">提交</button>

</表单>

提前感谢您的帮助！

解决方案

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

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

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

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

感谢回复

So I'm building an application using Phone Gap and jQuery mobile.

When using ajax to get a json response from a whitelisted server I am getting an error response. Nothing is showing in console however. The weird thing is that when testing the app within a web browser it works fine, it's only when I launch to my iphone device that it throws a strop.

It is worth saying now that the site I'm hosting my php scripts on is white listed within Phone Gap. I am using * in the array (just in case this makes a difference). I have worked out a jsonp workaround for this but don't want to use it - I feel if it's working in browsers it must be possible on the device. I'm hoping it's a simple fix...

Here is my simple php script just echoing a json string.

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

Here is the 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.');
                 }
                 });
          });
    });

edit: I also have this js on the page...it's recommended on the jquery mobile docs to use this when using Phone Gap

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

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

        </script>

And the form - I don't think this is necessary...

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

Thanks for the help in advance!

解决方案

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

这篇关于在 PhoneGap+jQuery Mobile 中使用 ajax 的 CORS 无法在设备上运行，但在浏览器上运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！