it-swarm.com.de

Domänenübergreifender Endpunkt mit jQuery laden AJAX

Ich versuche, eine domänenübergreifende HTML-Seite mit AJAX zu laden, aber wenn der Datentyp "jsonp" ist, kann ich keine Antwort erhalten. Bei Verwendung von jsonp erwartet der Browser jedoch einen Skript-Mime-Typ, empfängt jedoch "text/html".

Mein Code für die Anfrage lautet:

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

Gibt es eine Möglichkeit, Jsonp für die Anfrage zu vermeiden? Ich habe bereits versucht, den crossDomain-Parameter zu verwenden, aber es hat nicht funktioniert.

Wenn nicht, gibt es eine Möglichkeit, den HTML-Inhalt in Jsonp zu erhalten? Derzeit sagt die Konsole in der Jsonp-Antwort "unerwartet".

114
xonorageous

jQuery Ajax Notes

  • Aufgrund von Browser-Sicherheitsbeschränkungen unterliegen die meisten Ajax -Anfragen der gleichen Origin-Richtlinie ; Die Anforderung kann keine Daten erfolgreich von einer anderen Domäne, Subdomain, einem anderen Port oder Protokoll abrufen.
  • Skript- und JSONP-Anforderungen unterliegen nicht den gleichen Einschränkungen der Origin-Richtlinie.

Es gibt verschiedene Möglichkeiten, die Schranke domänenübergreifend zu überwinden:

Es gibt einige Plugins, die bei cross-domain -Anfragen helfen:

Kopf hoch!

Um dieses Problem zu beheben, können Sie am besten einen eigenen Proxy im Back-End erstellen, sodass Ihr Proxy auf die Dienste in anderen Domänen verweist, da im Back-End nicht die Einschränkung same Origin policy vorhanden ist . Wenn Sie das nicht im Backend tun können, beachten Sie die folgenden Tipps.


Warnung!

Die Verwendung von Proxies von Drittanbietern ist keine sichere Praxis, da sie Ihre Daten nachverfolgen können, sodass sie mit öffentlichen Informationen verwendet werden kann, never mit privaten Daten.


Die folgenden Codebeispiele verwenden jQuery.get () und jQuery.getJSON ()). Beide sind Abkürzungsmethoden von jQuery .ajax ()


CORS Überall

CORS Anywhere ist ein node.js-Proxy, der der Proxy-Anforderung CORS-Header hinzufügt.
Um die API zu verwenden, stellen Sie der URL einfach die API-URL voran. (Unterstützt https: siehe github repository )

Wenn Sie domänenübergreifende Anforderungen bei Bedarf automatisch aktivieren möchten, verwenden Sie das folgende Snippet:

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


Welchen Ursprung auch immer

Welcher Ursprung auch immer ist ein cross-Domain-Jsonp - Zugriff. Dies ist eine Open Source-Alternative zu anyorigin.com .

Um die Daten von google.com} abzurufen, können Sie dieses Snippet verwenden:

// 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 ist ein einfacher node.js-Proxy, um die CORS-Anforderung für eine Website zu aktivieren .. _ Ermöglicht Javascript-Code auf Ihrer Website, auf Ressourcen in anderen Domänen zuzugreifen, die normalerweise aufgrund derselben Origin-Richtlinie blockiert würden.

Funktionsweise: CORS Proxy nutzt Cross-Origin Resource Sharing, eine Funktion, die zusammen mit HTML 5 hinzugefügt wurde. Server können angeben, dass Browser anderen Websites gestatten möchten, von ihnen gehostete Ressourcen anzufordern. CORS Proxy ist einfach ein HTTP-Proxy, der den Antworten einen Header hinzufügt, der besagt "Jeder kann dies anfordern".

Dies ist ein anderer Weg, um das Ziel zu erreichen (siehe www.corsproxy.com ). Sie müssen lediglich http: // und www entfernen. von der URL, für die der Proxy verwendet wird, und fügen Sie die URL mit www.corsproxy.com/ voran.

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


CORS Proxy-Browser

Kürzlich habe ich dieses gefunden, es beinhaltet verschiedene sicherheitsorientierte Cross Origin Remote Sharing-Dienstprogramme. Es ist aber eine Blackbox mit Flash als Backend.

Sie können es hier in Aktion sehen: CORS Proxy-Browser
Den Quellcode von GitHub erhalten: koto/cors-proxy-browser

211
jherax

Sie können Ajax-cross-Origin mit einem jQuery-Plugin verwenden. Mit diesem Plugin verwenden Sie jQuery.ajax() cross domain. Es verwendet Google-Dienste, um dies zu erreichen:

Das Cross Origin-Plugin AJAX verwendet Google Apps Script als Proxy-jSON Getter wo jSONP nicht implementiert ist. Wenn Sie die crossOrigin einstellen Option true, ersetzt das Plugin die ursprüngliche URL durch Google Apps Script-Adresse und als verschlüsselter URL-Parameter senden. Das Google Apps Script verwendet Google Server-Ressourcen, um die Remote-Daten abzurufen, und Geben Sie es als JSONP an den Client zurück.

Es ist sehr einfach zu benutzen:

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

Sie können hier mehr lesen: http://www.ajax-cross-Origin.com/

19
Ninioe

Wenn die externe Site JSONP oder CORS nicht unterstützt, besteht die einzige Möglichkeit darin, einen Proxy zu verwenden.

Erstellen Sie auf Ihrem Server ein Skript, das diesen Inhalt anfordert, und verwenden Sie dann jQuery ajax, um das Skript auf Ihrem Server auszuführen.

10
Kevin B

Geben Sie dies einfach in die Kopfzeile Ihrer PHP Page ein und es wird ohne API funktionieren:

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

oder

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

oder 

$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");
}
3
studio-klik

Um die Daten von einer externen Site zu erhalten, indem Sie einen lokalen Proxy verwenden, wie von jherax vorgeschlagen, können Sie eine PHP-Seite erstellen, die den Inhalt für Sie von der jeweiligen externen URL abruft, und dann eine Get-Anfrage an diese PHP-Seite senden.

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

als PHP-Proxy können Sie https://github.com/cowboy/php-simple-proxy verwenden.

0
Nitigya Sharma

Ich poste dies für den Fall, dass jemand das gleiche Problem hat, vor dem ich gerade stehe. Ich habe einen Zebra-Thermodrucker mit ZebraNet-Druckserver, der eine HTML-basierte Benutzeroberfläche zum Bearbeiten mehrerer Einstellungen, zum Anzeigen des aktuellen Status des Druckers usw. bietet. Ich muss den Status des Druckers abrufen, der angezeigt wird in einer dieser HTML-Seiten, die vom ZebraNet-Server angeboten wird, und beispielsweise alert () eine Nachricht an den Benutzer im Browser. Das bedeutet, dass ich diese HTML-Seite zuerst in Javascript erhalten muss. Obwohl sich der Drucker im LAN des PCs des Benutzers befindet, bleibt mir Same Origin Policy immer noch im Weg. Ich habe JSONP ausprobiert, aber der Server gibt html zurück und ich habe keine Möglichkeit gefunden, seine Funktionalität zu ändern (wenn ich könnte, hätte ich bereits den magischen Header Access-control-allow-Origin gesetzt: *). Also entschied ich mich, eine kleine Konsolen-App in C # zu schreiben. Es muss als Administrator ausgeführt werden, damit es ordnungsgemäß funktioniert. Andernfalls wird eine Ausnahme ausgegeben. Hier ist ein Code:

// 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();

Der Benutzer muss diese Konsolen-App nur als Administrator ausführen. Ich weiß, dass es viel zu frustrierend und kompliziert ist, aber es ist eine Art Problemumgehung für das Problem mit der Domänenrichtlinie, falls Sie den Server in keiner Weise ändern können.

edit: von js mache ich einen einfachen ajax-anruf:

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

Das HTML der angeforderten Seite wird zurückgegeben und in der Variable data gespeichert.

0
user2177283

Ihre URL funktioniert derzeit nicht, aber Ihr Code kann mit dieser funktionierenden Lösung aktualisiert werden:

var url = "http://saskatchewan.univ-ubs.fr:8080/SASStoredProcess/do?_username=DARTIES3-2012&[email protected]&_program=%2FUtilisateurs%2FDARTIES3-2012%2FMon+dossier%2Fanalyse_dc&annee=2012&ind=V&_action=execute";

url = 'https://google.com'; // TEST URL

$.get("https://images"+~~(Math.random()*33)+"-focus-opensocial.googleusercontent.com/gadgets/proxy?container=none&url=" + encodeURI(url), function(data) {
    $('div.ajax-field').html(data);
});
<div class="ajax-field"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

0
350D