Question

我在Cordova / Phonegap for iOS中构建应用程序。

我有一个登录表单，通过将用户名+密码传递给我服务器上的PHP脚本，通过AJAX调用工作。

当我通过我的电脑上的localhost（Chrome，具体而言）运行时，它可以正常工作。 AJAX调用传递给PHP，PHP运行，并返回响应。

当我通过Phonegap测试应用在我的iOS设备上运行相同的实例时，没有任何URL /表单提交。没有基于网络的任何方式。我在index.html页面上有一个来自外部源的图像，这在iOS上没有加载。

我认为这是一个权限问题，因此我将标题更改为以下内容：

<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-eval' data: blob: filesystem: ws: gap: file: cdvfile: https://ssl.gstatic.com *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'; img-src * data: 'unsafe-inline'; connect-src * 'unsafe-inline'; child-src *; ">

我还在config.xml中添加了以下内容：

<allow-navigation href="*" />
<allow-intent href="*" />
<access origin="*"/>

这个想法是，这将允许所有流量通过（仅用于测试目的 - 从安全角度来看，我知道这不是一个好主意。）

从HTTP源中提取的index.html中的图片（之前没有呈现）现在正在我的iOS设备上运行，这很棒，因为它意味着更改权限帮助，但不幸的是AJAX仍然没有工作。

这是我在Index.html中的内容：

<html>
<head>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="scripts/scripts.js"></script>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-eval' data: blob: filesystem: ws: gap: file: cdvfile: https://ssl.gstatic.com *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'; img-src * data: 'unsafe-inline'; connect-src * 'unsafe-inline'; child-src *; ">
    <link rel="stylesheet" type="text/css" href="style/bootstrap.min.css">
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style/leaf.css">
    <title>App Name</title>
</head>
<body onload="onLoad()">


    <img style="width:25%; padding-top:2em;" src="img/logo.png" /> <!-- Local image, which works fine on all devices -->
    <img style="width:25%; padding-top:2em;" src="http://www.userlogos.org/files/logos/Karmody/alaTest_Iphone01a.png" /> <!-- external image which didn't work earlier but works now since I changed the header permissions -->
    <form id="loginForm" onsubmit='return false;' action="http://LINK TO SERVER/login.php"  role="form" method="post" >

        <input type="text" name="username" id="username">


        <input type="password" name="password" id="password">


        <input type="submit" name="submit" value="Login">

    </form>

    <h3><a href='http://google.com'>Link to page (Works in browser but not in mobile)</a></h3>


</body>
</html>

这是我的脚本文件：

function onLoad() {
    document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
    console.log(device.uuid);
}

function onDeviceReady() {
    $('#loginForm').submit(function(){
        var username = $("[name='username']").val();
        var password = $("[name='password']").val();
        var dataString = {username: username,password: password};
        $.ajax({
            type: "POST",
            url: "http://LINK TO SERVER/login.php",
            data: dataString,
            dataType: 'json',
            crossDomain: true,
            cache: false,
            success: function(responseBack){
                if(response == "success"){alert("Successfully authenticated.");}
                else{alert("Username/password incorrect.");}
            }
        });


    });

}

关于我应该排除什么问题以便让网络通话工作的任何提示？

谢谢！

Answer 1

通过启用jQuery Cors修复了问题。

$.support.cors = true;

Cordova / Phonegap：AJAX调用无法在iOS设备上运行

1 个答案: