PhoneGap应用在Google Ripple上无法工作

9

我正在开发一个PhoneGap应用程序。当我在浏览器中测试我的应用程序时没有问题,一切都很顺利。但是当我在ripple中尝试时,我的javascript不起作用。 具体来说:用户可以登录系统,如果成功重定向到另一个页面(使用jquery mobile),在chrome、internet explorer和firefox中都能正常工作。但在ripple中无法正常工作。 我的代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title></title>
    <link rel="stylesheet" href="css/jquery.mobile-1.3.2.css">

    <script src="js/jquery-1.10.2.js"></script>
    <script src="js/jquery.mobile-1.3.2.js"></script>
    <script src="js/jquery.base64.js"></script>
    <script src="js/cordova.js"></script>
    <script type="text/javascript">
        $(function() {
            var credentials = 'admin:adminabc';
            var authType = "Basic " + credentials;
            $('#loginForm').submit(function() {
                $.ajax({
                    type : "GET",
                    url :  'http://localhost:30673/api/user/Get',
                    data : 'json',
                    beforeSend : function(xhr) {
                         xhr.setRequestHeader("Authorization", authType);
                    },
                    success : function(data, textStatus) {
                        $.mobile.changePage("#menu", {
                            transition : "slideup"
                        });
                    }
                });
            });

            $("#aboutUs").click(function() {
                $.ajax({
                    type : "GET",
                    url :  'http://localhost:30673/api/AboutMeWA/',
                    data : 'json',
                    beforeSend : function(xhr) {
                         xhr.setRequestHeader("Authorization", authType);
                    },
                    success : function(data, textStatus) {
                        $('#aboutMeTitle').val(data);
                    }
                });
            });
        });

        function onBodyLoad() {
            document.addEventListener("deviceready", onDeviceReady, false);

            function onDeviceReady() {
                document.addEventListener("pause", onPause, false);
                document.addEventListener("resume", onResume,  false);
            }

            function onPause() {
                alert("paused");
            }

            function onResume() {
                alert("resume");
            }

        }
    </script>
</head>
<body onload="onBodyLoad()">
    <div data-role="page" id="mainPage">
        <div data-role="header" data-theme="a" >
            <h4> Ziro </h4>
        </div>
        <div data-role="content">
            <form id="loginForm">
                <div data-role="fieldcontain">
                    <label for="textinput1"> Kullanıcı Adı:     </label>
                    <input name="" id="userName"  placeholder="username" value="" type="text">
                </div>
                <div data-role="fieldcontain">
                    <label for="textinput2"> Password</label>
                    <input name="" id="password"  placeholder="password" value="" type="password">
                </div>
                <input type="submit" data-theme="a" data- icon="arrow-r" data-iconpos="left"
                value="Login">
            </form>
            <a href="#menu" class="ui-link" data- transition="flip">Menü</a>
        </div>
        <div data-role="footer" data-theme="a"  data-position="fixed">
            <h3> FF Yazılım </h3>
        </div>

    </div>
    <div data-role="page" id="menu" data-add-back-btn="true" data-back-btn-text="Geri">
        <div data-role="header" data-theme="a" >
            <h4> Ziro Mobilya </h4>
        </div>
        <div data-role="content">
            <ul data-role="listview" data-divider-theme="a" data- inset="true">
                <li data-role="list-divider" role="heading">
                    Panel
                </li>
                <li data-theme="c">
                    <a href="#about" data-transition="flip"  id="aboutUs"> Hakkımızda </a>
                </li>
                <li data-theme="c">
                    <a href="#page1" data-transition="slide">  Referans Resimleri </a>
                </li>
                <li data-theme="c">
                    <a href="#page1" data-transition="slide"> Servis Resimleri </a>
                </li>
                <li data-theme="c">
                    <a href="#page1" data-transition="slide"> Slogan </a>
                </li>
                <li data-theme="c">
                    <a href="#page1" data-transition="slide"> İstatistikler </a>
                </li>
                <li data-theme="c">
                    <a href="#page1" data-transition="slide">  Button </a>
                </li>
            </ul>
        </div>
        <div data-role="footer" data-theme="a"  data-position="fixed">
            <h3> FF Yazılım </h3>
        </div>
    </div>

    <div data-role="page" id="about" data-add-back-btn="true" data-back-btn-text="Geri">
        <div data-theme="a" data-role="header">
            <h3> Hakkımızda </h3>
        </div>
        <div data-role="content">
            <div style="">
                <img style="width: 288px; height: 100px"  src="http://aknera.com/temp/default/images/background3.jpg">
            </div>
            <a data-role="button" data-theme="a" href="#page1" data-icon="arrow-l"
            data-iconpos="left"> Galeriden Resim Seç </a>
            <div data-role="fieldcontain">
                <label for="textinput2"> Başlık: </label>
                <input name="" id="aboutMeTitle" placeholder=""  value="" type="text" data-mini="true">
            </div>
            <div data-role="fieldcontain">
                <label for="textarea2"> Açıklama </label>
                <textarea name="" id="textarea2" placeholder=""  data-mini="true"></textarea>                                                           




            </div>
            <a data-role="button" data-theme="a" href="#page1" data-icon="alert" data-iconpos="left"> Kaydet </a>
        </div>
        <div data-role="footer" data-theme="a"  data-position="fixed">
            <h3> FF Yazılım </h3>
        </div>
    </div>
</body>
 </html>

我的应用程序结构如下所示:

enter image description here

错误代码是:xhr_proxy?tinyhippos_apikey=ABC&tinyhippos_rurl=http%3A//localhost%3A30673/ap‌​i/user/Get%3Fjson rippleapi.herokuapp.com 状态码:500 内部服务器错误。我正在从我的本地主机post地址获取数据:localhost:30673/api/user/Get';在浏览器中正常工作。而且从localhost:30673/api/user/Get获取数据也可以。但在ripple中,它尝试从此处获取数据:xhr_proxy?tinyhippos_apikey=ABC&tinyhippos_rurl=http%3A//localhost%3A30673/api/u‌​ser/Get%3Fjson rippleapi.herokuapp.com

需要大家的建议。


你在控制台中看到任何错误吗? - net.uk.sweet
错误代码为:xhr_proxy?tinyhippos_apikey=ABC&tinyhippos_rurl=http%3A//localhost%3A30673/api/user/Get%3Fjson rippleapi.herokuapp.com状态码:500 内部服务器错误我正在从我的本地主机地址http://localhost:30673/api/user/Get'获取数据。在浏览器中它正常工作,并从http://localhost:30673/api/user/Get获取数据。但是在Ripple中,它试图从这里获取数据:xhr_proxy?tinyhippos_apikey=ABC&tinyhippos_rurl=http%3A//localhost%3A30673/api/user/Get%3Fjson rippleapi.herokuapp.com - ftdeveloper
2个回答

24
您可能遇到的问题是使用了Ripple的跨域代理,默认情况下已启用。
跨域代理有三个设置:“remote”、“local”和“disabled”。在我的情况下,我需要将其禁用,但在某些情况下,您可以使用“local”。
可能出现以下几种情况:
1)您的本地应用程序调用远程服务器上的远程服务:
根据远程服务器上的配置,您可以使用“remote”或“disabled”。
2)您的本地应用程序在“localhost”上,并且您正在调用另一个可访问的本地主机URL:
根据您的跨域设置等,您可以使用“local”或“disabled”。
3)您正在运行一个调用本地服务器但在vm或其他使其无法通过“localhost”代理访问的服务器的本地应用:
您需要将其设置为“disabled”,并确保您的api服务器具有允许跨域请求的设置。特别是,您会想要设置“Access-Control-Allow-Origin”标头。

据我所知,对于(1)情况,也可以使用“本地”。使用本地代理是处理跨域Ajax的标准方法。 - Ilya Buziuk

2

我曾经遇到过相同的问题。当我尝试连接托管在IISExpress上的WebAPI服务时,出现了这个错误。

当我将托管改为我的本地IIS服务器后,错误消失了,我可以使用Ripple连接到我的WebAPI服务。当然,你需要更改指向你的服务的url(在你的情况下是http://localhost:30673)。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接