Problemy z obsługą zapytań ajaxowych za pomocą aplikacji Phonegap

Question

Próbuję utworzyć prosty czytnik RSS z Phonegap i jQuery. Postępuję zgodnie z tym samouczkiem: http://visualrinse.com/2008/09/24/how-to-build-a-simple-rss-reader-with-jquery/.

Udało mi się sprawić, żeby działało dobrze, gdy wypróbuję kod w przeglądarce. Plik php pobiera plik danych i wydaje go dokładnie tak, jak tego oczekuję. Ale kiedy uruchomię ten sam plik z mojej skompilowanej aplikacji Phonegap, ajax-request właśnie zwróci zawartość pliku php (php-code, a nie wykonanego wyniku).

Spędziłem wiele godzin na wyszukiwaniu i wypróbowywaniu wielu tutoriali i poprawek. Nie znalazłem też rozwiązań na oficjalnych forach Phonegap. Co ja robię źle? Problem wydaje się być PHP nie odpowiada na żądanie. Próbowałem przenieść plik php do innej domeny, ale wynik jest taki sam, działa w mojej przeglądarce, ale nie w skompilowanej aplikacji.

Oto kod jQuery, który inicjuje ajax-kod:

function get_rss_feed() { 
    //clear the content in the div for the next feed. 
    $("#feed_content").empty().html('<img class="loader" src="js/images/ajax-loader.gif" alt=""/>'); 

    $.ajax({ 
     url: 'http://192.168.1.7/rssApp/www/rss-proxy.php?url=http://www.nytimes.com/services/xml/rss/nyt/GlobalHome.xml', 
     success: function parseRSS(d) { 

     //find each 'item' in the file and parse it 
     $(d).find('item').each(function() { 

      //name the current found item this for this particular loop run 
      var $item = $(this); 
      // grab the post title 
      var title = $item.find('title').text(); 
      // grab the post's URL 
      var link = $item.find('link').text(); 
      // next, the description 
      var description = $item.find('description').text(); 
      //don't forget the pubdate 
      var pubDate = $item.find('pubDate').text(); 

      // now create a var 'html' to store the markup we're using to output the feed to the browser window 
      var html = "<div class=\"entry\"><h2 class=\"postTitle\">" + title + "<\/h2>"; 
      html += "<em class=\"date\">" + pubDate + "</em>"; 
      html += "<p class=\"description\">" + description + "</p>"; 
      html += "<a href=\"" + link + "\" target=\"_blank\">Read More >><\/a><\/div>"; 

      //put that feed content on the screen! 
      $('#feed_content').append($(html)); 
     }); 
     $('#feed_content img.loader').fadeOut(); 
    } 

    }); 

}; 

oto rss-proxy.php który ładuje plik XML z URL i wyjść to:

<?php 
    // PHP Proxy 
    // Loads a XML from any location. Used with Flash/Flex apps to bypass security restrictions 
    // Author: Paulo Fierro 
    // January 29, 2006 
    // usage: proxy.php?url=http://mysite.com/myxml.xml 

    $session = curl_init($_GET['url']);     // Open the Curl session 
    curl_setopt($session, CURLOPT_HEADER, false);   // Don't return HTTP headers 
    curl_setopt($session, CURLOPT_RETURNTRANSFER, true); // Do return the contents of the call 
    $xml = curl_exec($session);       // Make the call 
    header("Content-Type: text/xml");     // Set the content type appropriately 
    echo $xml;  // Spit out the xml 
    curl_close($session); // And close the session 
?> 

Answer 1

W końcu udało mi się to rozwiązać! Okazuje się, że należy dodać do białej listy serwer, który ma zostać zamówiony, z aplikacji PhoneGap w Xcode, jeśli chcesz wysyłać żądania do określonej domeny (bez względu na to, czy jest to lokalny host, czy cokolwiek innego). Powodem, dla którego nie znalazłem tego wcześniej, było to, że nie sprawdziłem błędów w odpowiedzi ajax. Kiedy już to zrobiłem, otrzymałem kod stanu http 401 (nieautoryzowany) i komunikat o błędzie "Whitelist rejected".

Aby to naprawić, otworzyłem plik PhoneGap.plist w moim projekcie i pod kluczem ExternalHosts dodałem nowy element o wartości: *.localhost. Ja również zmienił ajax url do:

url: 'http://localhost/rssApp/www/rss-proxy.php?url=http://www.nytimes.com/services/xml/rss/nyt/GlobalHome.xml'

skompilowany i uruchomić aplikację na iOS Simulator i mój serwer localhost odpowiedział doskonale udanym odpowiedzi AJAX!

Dla każdego hosta zewnętrznego, z którym aplikacja ma się połączyć, należy dodać ją do listy ExternalHosts. Na przykład, jeśli chcesz uzyskać dostęp do interfejsu API pod numerem http://google.com/maps/api.php, musisz dodać *.google.com do swojej listy.

Trochę irytujące, gdy próbujesz dowiedzieć się, dlaczego serwer nie odpowiada, ale myślę, że to jest dobre ze względów bezpieczeństwa.Mam nadzieję, że to pomoże komuś innemu, kto zmaga się z prostymi żądaniami ajaxowymi z ich aplikacji PhoneGap!

Answer 2

It wygląda na to, że uruchamiasz swój serwer lokalnie (w oparciu o adres IP 192.168.xx), co oznacza, że ​​mają do niego dostęp tylko urządzenia podłączone do Twojej sieci. Możesz podłączyć telefon do tej samej sieci Wi-Fi, co komputer jako tymczasową poprawkę. Ale będziesz musiał go hostować na prawdziwym serwerze, aby był dostępny przez Internet.

Można również przesłać port 80 na routerze na ten adres IP, a następnie użyć rzeczywistego adresu IP (zobacz whatsmyip.org) w adresie URL żądania. Ale to nie jest naprawdę stabilne rozwiązanie.