Phonegap跨域AJAX POST請求無法在Android上運行

Question

跨域AJAX POST請求在包括移動電話上的瀏覽器的Web瀏覽器上完美運行，但不適用於使用Phonegap構建的本機應用程序

我創建了一個登錄表單，用戶必須輸入他們的登錄憑據，然后由heroku上托管的服務器進行驗證，如果輸入了有效憑據，則返回json {"success":true} 。

我的Ajax腳本：

$.ajax({
   type: "POST",
   url: "http://domain.com/public/auth/app-login",
   contentType: "application/x-www-form-urlencoded; charset=utf-8",
   dataType: "json",
   data: {identity: <username from form>, password: <password from form>},
   crossDomain: true,
   cache: false,
   success: function(data) {
       obj = JSON.parse(data);
       if (obj && obj.success === true) {
          window.location.href = 'home.html';
       }
   },
   error: function(e) {
       alert('Error: ' + e.message);
   }
});

解決此問題的步驟：

• 域名白名單 - config.xml

<access origin="http://domain.com/public/auth/app-login" />

<access origin="*" />

• 告訴jQuery允許跨域

$.support.cors = true; 或者jQuery.support.cors = true;

• 禁用緩存cache: false

任何幫助表示贊賞。

Answer 1

好。 如果index.html在本地，那么您可以調用任何主機的ajax，而不需要在客戶端或服務器中啟用CORS。 你刪除：

$.support.cors = true; OR jQuery.support.cors = true;

和：

<access origin="http://domain.com/public/auth/app-login" />

它多余，只使用：

<access origin="*" />

您需要檢查並添加AndroidManifest.xml：

<uses-permission android:name="android.permission.INTERNET" />

如果您的應用需要，請添加更多權限 最后，在$（document）.ready（）中調用ajax：

$.ajax({
   type: "POST",
   url: "http://domain.com/public/auth/app-login",
   dataType: "json",
   data: {identity: <username from form>, password: <password from form>},
   success: function(data) {
     obj = JSON.parse(data);
     if (obj && obj.success === true) {
        window.location.href = 'home.html';
     }
   },
   error: function(e) {
     alert('Error: ' + e.message);
   }
});

Answer 2

如果您希望解決此問題，那么您可能希望確保插件正確地包含在構建過​​程中。

RESOURCE: \app\config.xml
<widget>
    .... [lots of stuff] ....
    <gap:plugin name="com.indigoway.cordova.whitelist.whitelistplugin" />
    <access origin="http://*" />
    ....
</widget>

您可能還希望指定一個推薦的版本，我沒有在上面指定一個版本。 測試插件是否包含的好方法是使用https://build.phonegap.com/apps提供的免費雲帳戶。 如果您在那里構建項目，則可以檢查插件選項卡並確保包含白名單插件。

我已經讀過你應該只在你的HTML頁面的HEAD元素中需要它，但我發現截至本文的日期，我仍然需要包含插件。

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

如果未加載插件，則在使用jQuery的$.ajax方法獲取錯誤字符串時可能會出現“未找到”錯誤。

Internet上的某些信息會告訴您白名單信息已放入/www/res/文件夾，但這似乎是過時的信息。 您可能還會發現<plugin...在某些示例中使用，但似乎這可能是一種過時的方式？

此外，您可能需要：

RESOURCE: \app\config.xml
<widget>
     ...
     <feature name="http://api.phonegap.com/1.0/network"/>
     ...
</widget>

Answer 3

使用

JSON.stringify(data: {identity: <username from form>, password: <password from form>}) 

而不是data: {identity: <username from form>, password: <password from form>}

當我改變我的代碼時，我得到了成功的消息。

Answer 4

有些時候您的域名存在問題。 在我的情況下，我通過在我的.htaccess文件中放入以下代碼來解決它

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>