Wie sende ich eine Cross-Domain-POST-Anfrage über JavaScript?

Question

Wie sende ich via JavaScript eine POST-Anfrage über verschiedene Domains hinweg?

Hinweise - die Seite sollte nicht neu geladen werden und ich muss die Antwort danach abrufen und analysieren.

Answer 1

Überprüfen Sie die post_method Funktion in http://taiyolab.com/mbtweet/scripts/twitterapi_call.js - ein gutes Beispiel für die oben beschriebene iframe-Methode.

Answer 2

1. Erstellen Sie zwei versteckte iframes (fügen Sie "display: none;" zum CSS-Stil hinzu). Lassen Sie Ihren zweiten iframe auf etwas in Ihrer eigenen Domain zeigen.

2. Erstellen Sie ein verstecktes Formular, setzen Sie die Methode auf "post" mit target = Ihrem ersten iframe und legen Sie optional enctype auf "multipart/form-data" fest (Ich denke, Sie möchten POST verwenden, weil Sie mehrteilige Daten wie Bilder senden möchten?)

3. Wenn Sie fertig sind, lassen Sie das Formular das POST submit() durchführen.

4. Wenn es Ihnen gelingt, die andere Domain dazu zu bringen, JavaScript zurückzugeben, das eine Cross-Domain-Kommunikation mit iframes durchführt (http://softwareas.com/cross-domain-communication-with-iframes), dann haben Sie Glück und können die Antwort auch erfassen.

Natürlich können Sie, wenn Sie Ihren Server als Proxy verwenden möchten, all dies vermeiden. Senden Sie einfach das Formular an Ihren eigenen Server, der die Anfrage an den anderen Server weiterleitet (vorausgesetzt, der andere Server ist nicht so eingestellt, IP-Diskrepanzen festzustellen), holen Sie die Antwort ein und geben Sie zurück, was immer Sie möchten.

Answer 3

Noch eine wichtige Sache zu beachten!!! In Beispiel oben wird beschrieben, wie man das verwendet

$.ajax({
    type     : 'POST',
    dataType : 'json', 
    url      : 'another-remote-server',
    ...
});

JQuery 1.6 und niedriger hat einen Bug mit Cross-Domain XHR. Laut Firebug wurden keine Anfragen außer OPTIONS gesendet. Kein POST. Überhaupt nicht.

Ich habe 5 Stunden damit verbracht, meinen Code zu testen/einzustellen. Viele Header auf dem entfernten Server (Skript) hinzugefügt. Ohne Erfolg. Aber später habe ich die JQuery-Bibliothek auf 1.6.4 aktualisiert und alles läuft wie geschmiert.

Answer 4

Wenn Sie dies in einer ASP.net MVC-Umgebung mit JQuery AJAX machen möchten, befolgen Sie diese Schritte: (dies ist eine Zusammenfassung der Lösung, die in diesem Thread angeboten wird)

Nehmen wir an, dass "caller.com" (kann jede Website sein) zu "server.com" (einer ASP.net MVC-Anwendung) posten muss

1. Fügen Sie in der Datei Web.config der "server.com"-App den folgenden Abschnitt hinzu:

2. Auf der "server.com"-Seite haben wir die folgende Aktion im Controller (namens "Home"), an die wir posten werden:

   [HttpPost]
   public JsonResult Save()
   {
       //Behandeln Sie die Postdaten...
   
       return Json(
           new
           {
               IsSuccess = true
           });
   }

3. Dann, von der "caller.com"-Seite, senden Sie Daten aus einem Formular (mit der HTML-ID "formId") an "server.com" wie folgt:

   $.ajax({
           type: "POST",
           url: "http://www.server.com/home/save",
           dataType: 'json',
           crossDomain: true,
           data: $(formId).serialize(),
           success: function (jsonResult) {
              //Machen Sie was immer mit der Antwort
           },
           error: function (jqXHR, textStatus) {
               //Fehler behandeln
           }
       });

Answer 5

Es gibt eine weitere Möglichkeit (die HTML5-Funktion verwendet). Sie können ein Proxy-Iframe auf dieser anderen Domain hosten, eine Nachricht mit postMessage an dieses Iframe senden, dann kann das Iframe eine POST-Anfrage (auf der gleichen Domain) durchführen und die Antwort über postMessage an das übergeordnete Fenster zurücksenden.

Elternteil auf sender.com

var win = $('iframe')[0].contentWindow

function get(event) {
    if (event.origin === "http://reciver.com") {
        // event.data ist die Antwort vom POST
    }
}

if (window.addEventListener){
    addEventListener("message", get, false)
} else {
    attachEvent("onmessage", get)
}
win.postMessage(JSON.stringify({url: "URL", data: {}}),"http://reciver.com");

Iframe auf reciver.com

function listener(event) {
    if (event.origin === "http://sender.com") {
        var data = JSON.parse(event.data);
        $.post(data.url, data.data, function(reponse) {
            window.parent.postMessage(reponse, "*");
        });
    }
}
// ich weiß nicht, ob wir hier jQuery verwenden können
if (window.addEventListener){
    addEventListener("message", listener, false)
} else {
    attachEvent("onmessage", listener)
}