폰갭 도메인 간 AJAX POST 요청은

Question

도메인 간 AJAX POST 요청이 휴대 전화의 브라우저를 포함하여 웹 브라우저에서 완벽하게 잘 작동 안드로이드에서 작동하지 않는,하지만 기본 응용 프로그램이 작동하지 않습니다 사용자가 로그인 자격 증명을 입력해야하는 로그인 양식은 heroku에서 호스팅되는 서버에 의해 확인되고 유효한 자격 증명이 입력되면 json {"success":true}을 반환합니다.

내 아약스 스크립트 :

$.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); 
    } 
}); 

단계는이 문제를 해결하기 위해 촬영 :

• Domain whitelisting - config.xml에

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

을

$.support.cors = true; 또는 jQuery.support.cors = true;

• 안 캐싱에게 크로스 도메인을 할 수 있도록 jQuery를 말하는

  <access origin="*" />

  • 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" /> 

이 중복 만 사용

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

추가 : 당신은 확인의 AndroidManifest.xml에 추가 할 필요가

<access origin="*" /> 

앱이 필요한 경우 더 많은 권한이 필요합니다. 마지막으로, $ 내부 (문서) .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); 
    } 
}); 

Answer 2

사용

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

대신 data: {identity: <username from form>, password: <password from form>}

의 내가 이렇게 내 코드를 변경할 때 성공의 메시지를 받았습니다.

Answer 3

이 문제를 해결하려면 플러그인이 빌드 프로세스에 올바르게 포함되어 있는지 확인하십시오.

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 방법을 사용할 때 당신이 "찾을 수 없음"오류를 얻을 수 있습니다.

인터넷의 일부 정보는 허용 목록 정보가 /www/res/ 폴더에 있지만, 오래된 정보 인 것 같습니다. 일부 예제에서는 <plugin...이 사용되는 것을 발견 할 수도 있지만, 이것은 쓸모없는 방법 일 수 있습니다.

또한, 당신은해야 할 수도 있습니다

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

Answer 4

문제가 도메인에이 시간을. 제 경우에는 .htaccess 파일에 다음 코드를 넣어서 해결했습니다.

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