Ładowanie punktu końcowego między domenami za pomocą jQuery AJAX

Próbuję załadować między domenową stronę HTML za pomocą AJAX, ale jeśli typ danych to "jsonp", nie mogę uzyskać odpowiedzi. Jednak przy użyciu jsonp przeglądarka oczekuje skryptu typu MIME, ale otrzymuje "text / html".

Mój kod do zapytania to:

$.ajax({
    type: "GET",
    url: "http://saskatchewan.univ-ubs.fr:8080/SASStoredProcess/do?_username=DARTIES3-2012&_password=P@ssw0rd&_program=%2FUtilisateurs%2FDARTIES3-2012%2FMon+dossier%2Fanalyse_dc&annee=2012&ind=V&_action=execute",
    dataType: "jsonp",
}).success( function( data ) {
    $( 'div.ajax-field' ).html( data );
});

Czy Jest jakiś sposób na uniknięcie użycia jsonp dla żądania? Próbowałem już użyć parametru crossDomain, ale nie zadziałało.

Jeśli nie, czy jest jakiś sposób na otrzymanie zawartości html w jsonp? Obecnie konsola mówi "nieoczekiwane

Author: halfer, 2013-02-21

8 answers

Jquery Ajax Notes

  • ze względu na ograniczenia bezpieczeństwa przeglądarki, większość żądań Ajax podlega tej samej polityce pochodzenia; żądanie nie może pomyślnie pobrać danych z innej domeny, subdomeny, portu lub protokołu.
  • żądania skryptu i JSONP nie podlegają tym samym ograniczeniom dotyczącym polityki pochodzenia.

Istnieje kilka sposobów na pokonanie bariery cross-domain :

Istnieją pewne wtyczki, które pomagają w cross-domain requests:

Uwaga!

Najlepszym sposobem na przezwyciężenie tego problemu jest stworzenie własnego proxy w back-end, tak aby twój proxy wskazywał na usługi w innych domenach, ponieważ w back-endzie nie istnieje ograniczenie same origin policy. Ale jeśli nie możesz tego zrobić w back-endzie, zwróć uwagę na następujące wskazówki.


Uwaga!

Używanie zewnętrznych serwerów proxy nie jest bezpieczną praktyką, ponieważ mogą one śledzić Twoje dane, więc mogą być używane z informacjami publicznymi, ale nigdy z prywatnymi data.


poniższe przykłady kodu wykorzystują jQuery.get() oraz jQuery.getJSON(), oba są skróconymi metodami jQuery.ajax()


Korsyka

Kors jest węzłem.js proxy, który dodaje nagłówki CORS do Proxy request.
Aby korzystać z API, wystarczy przedrostek adresu URL z adresem URL API. (Obsługuje https : Zobacz github repozytorium )

Jeśli chcesz automatycznie włączyć żądania między domenami w razie potrzeby, użyj następującego fragmentu:

$.ajaxPrefilter( function (options) {
  if (options.crossDomain && jQuery.support.cors) {
    var http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
    options.url = http + '//cors-anywhere.herokuapp.com/' + options.url;
    //options.url = "http://cors.corsproxy.io/url=" + options.url;
  }
});

$.get(
    'http://en.wikipedia.org/wiki/Cross-origin_resource_sharing',
    function (response) {
        console.log("> ", response);
        $("#viewer").html(response);
});


Niezależnie Od Pochodzenia

Niezależnie od pochodzenia jest dostępemcross domain jsonp . Jest to alternatywa open source dla anyorigin.com .

Aby pobrać dane z google.com, możesz użyć tego fragmentu:

// It is good specify the charset you expect.
// You can use the charset you want instead of utf-8.
// See details for scriptCharset and contentType options: 
// http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings
$.ajaxSetup({
    scriptCharset: "utf-8", //or "ISO-8859-1"
    contentType: "application/json; charset=utf-8"
});

$.getJSON('http://whateverorigin.org/get?url=' + 
    encodeURIComponent('http://google.com') + '&callback=?',
    function (data) {
        console.log("> ", data);

        //If the expected response is text/plain
        $("#viewer").html(data.contents);

        //If the expected response is JSON
        //var response = $.parseJSON(data.contents);
});


CORS Proxy

CORS Proxy jest prosty węzeł.js proxy , aby włączyć żądanie CORS dla dowolnej strony internetowej. Pozwala kodowi javascript w Twojej witrynie na dostęp do zasobów w innych domenach, które normalnie byłyby zablokowane z powodu tej samej polityki pochodzenia.

Jak to działa? Cors Proxy korzysta z Cross-Origin Resource Sharing, który jest funkcją, która została dodana wraz z HTML 5. Serwery mogą określić, że chcą, aby przeglądarki pozwól innym witrynom żądać zasobów, które hostują. CORS Proxy jest po prostu Proxy HTTP, który dodaje nagłówek do odpowiedzi mówiąc "każdy może tego zażądać".

Jest to inny sposób na osiągnięcie celu (zobacz www.corsproxy.com ). wystarczy rozebrać http: / / i www.W tym celu należy przesłać adres URL, który jest proxy, a następnie dodać adres URL www.corsproxy.com/

$.get(
    'http://www.corsproxy.com/' +
    'en.wikipedia.org/wiki/Cross-origin_resource_sharing',
    function (response) {
        console.log("> ", response);
        $("#viewer").html(response);
});


CORS Proxy browser

Ostatnio znalazłem ten, obejmuje różne zabezpieczenia oriented Cross Origin Remote Sharing utilities. Ale jest to czarna skrzynka z Flashem jako backendem.

Możesz zobaczyć go w akcji tutaj: CORS Proxy browser
Pobierz kod źródłowy na GitHub: koto / cors-Proxy-browser

 207
Author: jherax,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 11:47:32

Możesz użyć Ajax-cross-origin wtyczki jQuery. Dzięki tej wtyczce używasz jQuery.ajax() cross domain. W tym celu korzysta z usług Google:

Wtyczka AJAX Cross Origin wykorzystuje skrypt Google Apps jako serwer proxy jSON getter gdzie jSONP nie jest zaimplementowany. Kiedy ustawisz crossOrigin opcja true, plugin zastąpić oryginalny adres url z Google Adres skryptu aplikacji i wysłać go jako zakodowany parametr url. Google Apps Script użyj zasobów serwerów Google, aby uzyskać zdalny danych, oraz zwróć go Klientowi jako JSONP.

Jest bardzo prosty w użyciu:

    $.ajax({
        crossOrigin: true,
        url: url,
        success: function(data) {
            console.log(data);
        }
    });

Możesz przeczytać więcej tutaj: http://www.ajax-cross-origin.com/

 19
Author: Ninioe,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-10-26 08:09:06

Jeśli zewnętrzna strona nie obsługuje JSONP lub CORS, jedyną opcją jest użycie proxy.

Zbuduj skrypt na serwerze, który żąda tej zawartości, a następnie użyj jQuery ajax, aby uderzyć skrypt na serwerze.

 11
Author: Kevin B,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-02-21 15:05:47

Po prostu umieść to w nagłówku swojej strony PHP i działa bez API:

header('Access-Control-Allow-Origin: *'); //allow everybody  

Lub

header('Access-Control-Allow-Origin: http://codesheet.org'); //allow just one domain 

Lub

$http_origin = $_SERVER['HTTP_ORIGIN'];  //allow multiple domains

$allowed_domains = array(
  'http://codesheet.org',
  'http://stackoverflow.com'
);

if (in_array($http_origin, $allowed_domains))
{  
    header("Access-Control-Allow-Origin: $http_origin");
}
 1
Author: studio-klik,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-09-17 22:08:38

Zamieszczam to na wypadek, gdyby ktoś stanął przed tym samym problemem, z jakim mam teraz do czynienia. Mam drukarkę termiczną Zebra wyposażoną w serwer druku ZebraNet, który oferuje interfejs użytkownika oparty na HTML do edycji wielu ustawień, sprawdzania bieżącego stanu drukarki itp. Muszę uzyskać status drukarki, który jest wyświetlany na jednej z tych stron html, oferowanych przez serwer ZebraNet i, na przykład, alert () wiadomość do użytkownika w przeglądarce. Oznacza to, że muszę dostać ten html strona w języku Javascript. Mimo że drukarka znajduje się w sieci LAN komputera użytkownika, ta sama polityka Pochodzenia nadal pozostaje mi na drodze. Próbowałem JSONP, ale serwer zwraca html i nie znalazłem sposobu, aby zmodyfikować jego funkcjonalność (gdybym mógł, ustawiłbym już magiczny nagłówek Access-control-allow-origin:*). Postanowiłem więc napisać małą aplikację konsolową w C#. Musi być uruchomiony jako Admin żeby działał poprawnie, w przeciwnym razie trolluje :D wyjątek. Oto kilka kod:

// Create a listener.
        HttpListener listener = new HttpListener();
        // Add the prefixes.
        //foreach (string s in prefixes)
        //{
        //    listener.Prefixes.Add(s);
        //}
        listener.Prefixes.Add("http://*:1234/"); // accept connections from everywhere,
        //because the printer is accessible only within the LAN (no portforwarding)
        listener.Start();
        Console.WriteLine("Listening...");
        // Note: The GetContext method blocks while waiting for a request. 
        HttpListenerContext context;
        string urlForRequest = "";

        HttpWebRequest requestForPage = null;
        HttpWebResponse responseForPage = null;
        string responseForPageAsString = "";

        while (true)
        {
            context = listener.GetContext();
            HttpListenerRequest request = context.Request;
            urlForRequest = request.RawUrl.Substring(1, request.RawUrl.Length - 1); // remove the slash, which separates the portNumber from the arg sent
            Console.WriteLine(urlForRequest);

            //Request for the html page:
            requestForPage = (HttpWebRequest)WebRequest.Create(urlForRequest);
            responseForPage = (HttpWebResponse)requestForPage.GetResponse();
            responseForPageAsString = new StreamReader(responseForPage.GetResponseStream()).ReadToEnd();

            // Obtain a response object.
            HttpListenerResponse response = context.Response;
            // Send back the response.
            byte[] buffer = System.Text.Encoding.UTF8.GetBytes(responseForPageAsString);
            // Get a response stream and write the response to it.
            response.ContentLength64 = buffer.Length;
            response.AddHeader("Access-Control-Allow-Origin", "*"); // the magic header in action ;-D
            System.IO.Stream output = response.OutputStream;
            output.Write(buffer, 0, buffer.Length);
            // You must close the output stream.
            output.Close();
            //listener.Stop();

Wszystko, co użytkownik musi zrobić, to uruchomić aplikację konsoli jako administrator. Wiem, że tak jest ... frustrujące i skomplikowane, ale jest to swego rodzaju obejście problemu zasad domeny w przypadku, gdy nie można modyfikować serwera w żaden sposób.

Edit: z js wykonuję proste wywołanie ajax:

$.ajax({
                type: 'POST',
                url: 'http://LAN_IP:1234/http://google.com',
                success: function (data) {
                    console.log("Success: " + data);
                },
                error: function (e) {
                    alert("Error: " + e);
                    console.log("Error: " + e);
                }
            });

Html żądanej strony jest zwracany i przechowywany w zmiennej data.

 0
Author: user2177283,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-05-18 10:46:37

Aby uzyskać dane z zewnętrznej strony, przechodząc za pomocą lokalnego proxy, zgodnie z sugestią jherax, możesz utworzyć stronę php, która pobiera zawartość z odpowiedniego zewnętrznego adresu url, a następnie wysłać żądanie get do tej strony php.

var req = new XMLHttpRequest();
req.open('GET', 'http://localhost/get_url_content.php',false);
if(req.status == 200) {
   alert(req.responseText);
}

Jako proxy php możesz użyć https://github.com/cowboy/php-simple-proxy

 0
Author: Nitigya Sharma,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-06-22 12:44:09

Potrzebujesz Cors proxy, który proxy wysyła żądanie z przeglądarki do żądanej usługi z odpowiednimi nagłówkami CORS. Lista takich usług znajduje się w poniższym fragmencie kodu. Możesz również uruchomić podany fragment kodu, aby zobaczyć ping do takich usług z Twojej lokalizacji.

$('li').each(function() {
  var self = this;
  ping($(this).text()).then(function(delta) {
    console.log($(self).text(), delta, ' ms');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/jdfreder/pingjs/c2190a3649759f2bd8569a72ae2b597b2546c871/ping.js"></script>
<ul>
  <li>https://crossorigin.me/</li>
  <li>https://cors-anywhere.herokuapp.com/</li>
  <li>http://cors.io/</li>
  <li>https://cors.5apps.com/?uri=</li>
  <li>http://whateverorigin.org/get?url=</li>
  <li>https://anyorigin.com/get?url=</li>
  <li>http://corsproxy.nodester.com/?src=</li>
  <li>https://jsonp.afeld.me/?url=</li>
  <li>http://benalman.com/code/projects/php-simple-proxy/ba-simple-proxy.php?url=</li>
</ul>
 -2
Author: galeksandrp,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-01-16 08:24:54

Rozgryzłem to. Użyłem tego zamiast tego.

$('.div_class').load('http://en.wikipedia.org/wiki/Cross-origin_resource_sharing #toctitle');
 -7
Author: user3279865,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-16 12:45:23