Das laden von cross-domain-Endpunkt mit jQuery, AJAX

jQuery, Ajax Hinweise

• Aufgrund von browser-Sicherheits-Einschränkungen, die meisten Ajax Anfragen unterliegen den same-origin-policy; die Anfrage kann nicht erfolgreich abrufen von Daten von einer anderen domain, subdomain, port oder Protokoll.
• Skript-und JSONP-Anforderungen sind nicht Gegenstand der same-origin-Richtlinie Einschränkungen.

Gibt es einige Möglichkeiten, um zu überwinden, die cross-domain - Barriere:

• CORS Proxy-Alternativen
• Möglichkeiten zum umgehen der same-origin policy
• Brechen Die Cross-Domain-Schranke

Gibt es einige plugins, die helfen, mit cross-domain - Anforderungen:

• Cross-Domain-AJAX-Anfrage mit YQL und jQuery
• Cross-domain-requests mit jQuery.ajax

Heads-up!

Der beste Weg, um dieses problem zu überwinden, ist, indem Sie Ihre eigenen proxy in der back-end, so dass Sie Ihre proxy-Punkt zu den Leistungen in anderen Domänen, denn im back-end nicht vorhanden ist, wird der same-origin-policy Einschränkung. Aber wenn Sie nicht tun können, die im back-end, dann achten Sie auf die folgenden Tipps.

Warnung!

Mithilfe von Drittanbieter-proxies ist kein Sicheres Verfahren, denn Sie können halten Sie den überblick über Ihre Daten, so kann es verwendet werden, mit öffentlichen Informationen, aber nie mit privaten Daten.

Die code-Beispiele gezeigt, unter Verwendung jQuery.get() und jQuery.getJSON(), beide sind Kürzel Methoden der jQuery.ajax()

CORS Überall

CORS Überall ist ein node.js proxy fügt CORS-Header auf die weitergeleitete Anfrage.

Die API zu verwenden, wird nur das Präfix der URL, mit der API-URL. (Unterstützt https: siehe github-repository)

Wenn Sie wollen, um automatisch zu aktivieren, cross-domain-Anfragen, wenn Sie benötigt werden, verwenden Sie den folgenden Codeausschnitt:

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

Unabhängig Von Ihrer Herkunft

Was Auch Immer Herkunft ist ein cross-domain jsonp Zugang. Dies ist ein open-source-alternative zu anyorigin.com.

Zum abrufen der Daten aus google.com, Sie können mit diesem snippet:

//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 eine einfache node.js proxy zu aktivieren CORS Anfrage für eine website.
Es ermöglicht, javascript-code auf Ihre Website, um den Zugriff auf Ressourcen in anderen Domänen, die normalerweise blockiert würde, aufgrund der same-origin-policy.

• CORS-Proxy-gr2m
• CORS-Proxy rmadhuram

Wie funktioniert es?
CORS Proxy nutzt die Vorteile von Cross-Origin Resource Sharing, das ist ein feature, das Hinzugefügt wurde, zusammen mit HTML-5. - Server können Sie angeben, dass Sie wollen Browser zulassen, dass andere websites, auf Ressourcen anfordern, die Sie hosten. CORS ist einfach Proxy ein HTTP-Proxy, fügt einen header hinzu, um zu Antworten zu sagen "das kann jeder anfordern".

Dies ist ein weiterer Weg, um das Ziel zu erreichen (siehe http://www.corsproxy.com). Alles, was Sie tun müssen, ist strip http:// und www. aus der URL wird umgeleitet, und Schreibe die URL mit 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

Vor kurzem fand ich diese ein, geht es um die verschiedenen Sicherheits-orientierte Cross-Origin Remote Sharing Tools. Aber es ist eine black-box mit Flash als backend.

Sehen Sie es in Aktion hier: CORS proxy-browser

Holen Sie sich den source code auf GitHub: koto/cors-proxy-browser

InformationsquelleAutor jherax

Wenn die externe Seite nicht unterstützt JSONP oder CORS, ist Ihre einzige option ist einen proxy zu benutzen.

Erstellen Sie ein Skript auf Ihrem server, Anforderungen, Inhalte, dann die jQuery-ajax-hit-Skript auf deinem server.

InformationsquelleAutor Kevin B

Ich bin dieses posting, falls jemand mit den selben problem ich bin jetzt gegenüber. Ich habe eine Zebra-Thermodrucker ausgestattet, mit der ZebraNet print server, bietet eine HTML-basierte Benutzeroberfläche für die Bearbeitung von mehreren Einstellungen zu sehen, der Drucker den aktuellen status, etc. Ich brauche, um den status des Druckers, angezeigt in einer dieser html-Seiten, angeboten durch die server und ZebraNet, beispielsweise alert() eine Meldung an den Benutzer in den browser. Dies bedeutet, dass ich auf dieser html-Seite in Javascript-ersten. Obwohl der Drucker in das LAN von dem PC des Benutzers, dass Same-Origin-Policy ist noch fest bleiben in meinem Weg. Ich habe versucht, JSONP, aber der server gibt html, und ich habe nicht gefunden, einen Weg, um Funktionalitäten zu ändern (wenn ich könnte, würde ich haben bereits den magic-header Access-control-allow-origin:*"). Also beschloss ich, schreiben Sie eine kleine Konsolenanwendung in C#. Es muss als Admin ausgeführt, um richtig zu arbeiten, sonst wird es Trolle 😀 eine Ausnahme. Hier einige 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();

Alle der Benutzer tun muss, ist ausgeführt, dass die Konsole app als Admin. Ich weiß, es ist viel zu ... frustrierend und kompliziert, aber es ist eine Art workaround, um die Domänenrichtlinie problem, in Fall, dass Sie nicht ändern Sie den server in irgendeiner Weise.

edit: von js ich eine einfache ajax-Aufruf:

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

Den html-Code der angeforderten Seite wird zurückgegeben und gespeichert in der Daten variable.

InformationsquelleAutor user2177283

Herausgefunden.
Verwendet dieser statt.

$('.div_class').load('http://en.wikipedia.org/wiki/Cross-origin_resource_sharing #toctitle');

InformationsquelleAutor user3279865