2013-08-23 7 views
9

पर काम नहीं कर रहा है, मैं एक फोन गैप एप्लीकेशन विकसित कर रहा हूं। जब मैं ब्राउज़र में अपने आवेदन का परीक्षण करता हूं तो कोई समस्या नहीं होती है। सब कुछ अच्छी तरह से काम करता है। लेकिन जब मैं लहर में कोशिश करता हूं, तो मेरी जावास्क्रिप्ट काम नहीं करती है। विस्तार से: उपयोगकर्ता सिस्टम लॉगिन कर सकता है और यदि यह सफलतापूर्वक किसी अन्य पृष्ठ पर उपयोग किया जाता है (jquery मोबाइल का उपयोग किया जाता है) यह क्रोम, इंटरनेट एक्सप्लोरर और फ़ायरफ़ॉक्स में अच्छी तरह से काम करता है। लेकिन लहर में काम नहीं करता है। मेरे कोड नीचे दिखाया गया है:फ़ोनगैप एप्लिकेशन Google रिपल

<!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 = एबीसी & tinyhippos_rurl = http% 3A // स्थानीय होस्ट% 3A30673/ap i/user /% 3Fjson rippleapi.herokuapp.com प्राप्त करें स्थिति कोड: 500 आंतरिक सर्वर त्रुटि मुझे अपने लोकहोस्ट पोस्ट एड्रेस से डेटा मिल रहा है: localhost: 30673/api/user/get '; यह ब्राउज़र में अच्छी तरह से काम कर रहा है। और स्थानीयहोस्ट से डेटा प्राप्त करना: 30673/एपीआई/उपयोगकर्ता/प्राप्त करें। लेकिन लहर में यह वहाँ से डेटा प्राप्त करने की कोशिश करता है? Xhr_proxy tinyhippos_apikey = एबीसी & tinyhippos_rurl = http% 3A // स्थानीय होस्ट% 3A30673/api/u सेवा/प्राप्त करें% 3Fjson rippleapi.herokuapp.com

आवश्यकता सलाह लोग।

+0

क्या आपको कंसोल में कोई त्रुटि दिखाई देती है? –

+0

त्रुटि कोड है: xhr_proxy tinyhippos_apikey = एबीसी और tinyhippos_rurl = http% 3A // स्थानीय होस्ट% 3A30673/api/उपयोगकर्ता/प्राप्त करें% 3Fjson rippleapi.herokuapp.com स्थिति कोड: 500 आंतरिक सर्वर त्रुटि I'am हो रही डेटा मेरे लोकहोस्ट पोस्ट एड्रेस से: http: // localhost: 30673/api/user/' यह ब्राउज़र में अच्छी तरह से काम कर रहा है। और http: // localhost से डेटा प्राप्त करना: 30673/एपीआई/उपयोगकर्ता/प्राप्त करें। लेकिन लहर में यह वहाँ से डेटा प्राप्त करने की कोशिश करता है: xhr_proxy tinyhippos_apikey = एबीसी और tinyhippos_rurl = http% 3A // स्थानीय होस्ट% 3A30673/api/उपयोगकर्ता/प्राप्त करें% 3Fjson rippleapi.herokuapp.com के लिए (1) परिदृश्य – fuat

उत्तर

24

जो समस्या आप चल रहे हैं वह यह है कि आप रिपल की क्रॉस-डोमेन प्रॉक्सी का उपयोग कर रहे हैं जो डिफ़ॉल्ट रूप से सेटिंग्स में चालू है।

क्रॉस-डोमेन-प्रॉक्सी में 3 सेटिंग्स हैं: "दूरस्थ", "स्थानीय" और "अक्षम"। मेरी स्थिति में मुझे वास्तव में इसे अक्षम करना पड़ा, लेकिन कुछ मामलों में आप "स्थानीय" का उपयोग करने में सक्षम होंगे।

संभावित परिदृश्यों:

1) अपने स्थानीय आवेदन एक और सर्वर पर कहीं न कहीं एक दूरस्थ सेवा कॉल:

आप या तो रिमोट सर्वर पर प्रयोग करेंगे विन्यास पर "दूरस्थ" या "अक्षम" निर्भर करता है ।

2) अपने स्थानीय आवेदन पर "स्थानीय होस्ट" है और आप एक और स्थानीय होस्ट पहुँच योग्य URL के लिए एक कॉल कर रहे हैं:

आप या तो प्रयोग करेंगे आपके क्रॉस डोमेन सेटिंग्स पर "स्थानीय" या "अक्षम" निर्भर करता है और इस तरह के।

3) आपको लगता है कि एक सर्वर है कि पर "स्थानीय होस्ट" यह दुर्गम बनाता है एक प्रॉक्सी के लिए भी स्थानीय लेकिन एक VM या कुछ में है कि कॉल एक स्थानीय एप्लिकेशन चला रहे हैं:

आप इसे सेट करने की जरूरत है "अक्षम" करने के लिए, और सुनिश्चित करें कि आपके एपीआई सर्वर में क्रॉस-डोमेन अनुरोधों की अनुमति देने के लिए सेटिंग्स हैं। सबसे विशेष रूप से आप "एक्सेस-कंट्रोल-ऑब्जेक्ट-ओरिजिन" हेडर सेट करना चाहते हैं।

+0

AFAIK? कोई भी "स्थानीय" का उपयोग कर सकता है। क्रॉस-डोमेन अजाक्स को संभालने के लिए स्थानीय प्रॉक्सी का उपयोग करना एक मानक दृष्टिकोण है –

2

मुझे एक ही समस्या थी। यह तब हो रहा था जब मैं IISExpress पर होस्ट की गई मेरी वेबएपीआई सेवा से कनेक्ट करने का प्रयास कर रहा था।

जब मैंने अपने स्थानीय आईआईएस सर्वर पर होस्टिंग बदल दिया, तो त्रुटि असंतुष्ट हो गई और मैं रिपल का उपयोग करके अपनी वेबएपीआई सेवा से कनेक्ट करने में सक्षम था। बेशक, आपको अपनी सेवा में इंगित यूआरएल बदलना होगा (आपके मामले में यह http://localhost:30673 है)।

संबंधित मुद्दे