2016-12-30 90 views
0

我正在爲Cordova/Phonegap構建iOS應用程序。科爾多瓦/ Phonegap:AJAX調用不適用於iOS設備

我有一個登錄表單,它通過將用戶名+密碼傳遞給我的服務器上的PHP腳本通過AJAX調用工作。

當我通過我的PC上的本地主機(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="*"/> 

的想法是這會讓所有流量都通過(僅用於測試目的 - 我知道從安全角度來看這不是一個好主意)。

index.html中的圖片,圖片是從一個HTTP源,它沒有被更早呈現拉,我的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.");} 
      } 
     }); 


    }); 

} 

我什麼,我應該爲了獲得網絡解決任何提示來電工作?

謝謝!

回答

0

通過啓用jQuery Cors修復了問題。

$.support.cors = true;