Phonegap Междоменный AJAX POST Запрос не работает на Android
Кросс-доменный запрос AJAX POST отлично работает в веб-браузерах, включая браузеры на мобильных телефонах, но не работает для встроенных приложений, построенных с помощью Phonegap
Я создал регистрационную форму, в которой пользователи должны вводить свои учетные данные для входа, затем они проверяются сервером, который размещен на heroku, и возвращает json {"success":true}
, если введены действительные учетные данные.
Мой Ajax script:
$.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);
}
});
Шаги, предпринятые для решения этой проблемы:
<access origin="http://domain.com/public/auth/app-login" />
<access origin="*" />
- Передача jQuery для разрешения междоменного
$.support.cors = true;
ИЛИ
jQuery.support.cors = true;
- Отключить кэширование
cache: false
Любая помощь приветствуется.
Ответы
Ответ 1
Ok. Если 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" />
Добавьте больше разрешений, если требуется ваше приложение. Наконец, вызовите ajax внутри $(document).ready():
$.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);
}
});
Ответ 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. Если вы создадите свой проект там, вы можете проверить вкладку плагинов и убедиться, что включен белый плагин.
Я прочитал, что вам нужно только это в элементе HEAD вашей HTML-страницы, но я нашел на дату этого сообщения, что мне все еще нужно включить плагин.
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
Если плагин не загружен, вы можете получить ошибку "Not Found" при использовании метода $.ajax
для jQuery для строки ошибки.
Некоторая информация в Интернете сообщит вам, что информация о белом списке помещается в папку /www/res/
, но это, как представляется, является устаревшей информацией. Вы также можете обнаружить, что в некоторых примерах используется <plugin...
, но кажется, что это может быть устаревшим способом?
Кроме того, вам может понадобиться:
RESOURCE: \app\config.xml
<widget>
...
<feature name="http://api.phonegap.com/1.0/network"/>
...
</widget>
Ответ 3
использование
JSON.stringify(data: {identity: <username from form>, password: <password from form>})
вместо
data: {identity: <username from form>, password: <password from form>}
Я получил сообщение о успехе, когда я изменил свой код следующим образом.
Ответ 4
Некоторое время в вашем домене возникает проблема. В моем случае я решил это, поставив следующий код в мой .htaccess файл
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>