Wie sende ich eine cross-domain-POST-Anfrage via JavaScript?

Update:, Bevor Sie fortfahren sollte jeder Lesen und verstehen, die html5rocks-tutorial auf CORS. Es ist leicht zu verstehen und sehr klar.

Wenn Sie den server Steuern Gebucht wird, einfach nutzen Sie die "Cross-Origin Resource Sharing standard" - Einstellung-Antwort-Header an den server. Die Antwort auf diese Frage diskutiert, auch in anderen Antworten in diesem thread, aber nicht sehr klar in meiner Meinung.

Kurz hier ist, wie Sie bei der Durchführung der cross-domain-POST aus from.com/1.html zu to.com/postHere.php (mit PHP als Beispiel). Hinweis: Sie müssen nur Access-Control-Allow-Origin für NICHT OPTIONS - Anforderungen - das Beispiel legt immer alle Header für einen kleineren code-snippet.

1. In postHere.php setup die folgenden:

   switch ($_SERVER['HTTP_ORIGIN']) {
       case 'http://from.com': case 'https://from.com':
       header('Access-Control-Allow-Origin: '.$_SERVER['HTTP_ORIGIN']);
       header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');
       header('Access-Control-Max-Age: 1000');
       header('Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With');
       break;
   }

   Dies ermöglicht, dass das Skript, um cross-domain-POST, GET und OPTIONEN. Dies wird klar werden, wie Sie weiter Lesen...

2. Richten Sie Ihre cross-domain-POST von JS (jQuery Beispiel):

   $.ajax({
       type: 'POST',
       url: 'https://to.com/postHere.php',
       crossDomain: true,
       data: '{"some":"json"}',
       dataType: 'json',
       success: function(responseData, textStatus, jqXHR) {
           var value = responseData.someKey;
       },
       error: function (responseData, textStatus, errorThrown) {
           alert('POST failed.');
       }
   });

Wenn Ihr die POST in Schritt 2 sendet Ihr browser uns eine "OPTIONEN" - Methode an den server. Dies ist ein "schnuppern", die vom browser angezeigt, wenn der server ist cool mit Ihnen veröffentlicht. Der server antwortet mit einer "Access-Control-Allow-Origin" erzählt die browser seine OK, um POST|GET|ORIGIN, wenn Anforderung stammt aus "http://from.com" oder "https://from.com". Da der server OK ist mit ihm, stellt der browser eine 2. Anfrage (diesmal ein POST). Es ist gute Praxis, um Ihre Kunden die content-type-es ist zu senden - so dass Sie brauchen werden, um zu ermöglichen, dass als gut.

MDN hat eine große write-up über HTTP access control, dass geht ins detail, wie der gesamte flow funktioniert. Nach Ihren docs, es soll "funktionieren in Browsern, die Unterstützung von cross-site XMLHttpRequest". Dies ist ein wenig irreführend, aber, wie ich DENKE nur moderne Browser erlauben es, cross-domain-POST. Ich habe nur überprüft, das funktioniert mit safari,chrome,FF 3.6.

Bitte beachten Sie Folgendes, wenn Sie dies tun:

1. Ihre server behandeln musst, bei 2 Anfragen pro Betrieb
2. Sie haben zu denken, über die Auswirkungen auf die Sicherheit. Seien Sie vorsichtig, bevor Sie so etwas wie " Access-Control-Allow-Origin: *'
3. Dies nicht funktionieren auf mobilen Browsern. In meiner Erfahrung, Sie erlauben keine cross-domain-POST an alle. Ich habe getestet, android, iPad, iPhone
4. Es ist ein ziemlich großer bug in FF < 3.6, wo, wenn der server gibt eine non-400-Antwort-code UND es gibt eine Antwort Körper (Fehler bei der Validierung zum Beispiel), FF 3.6 nicht die Antwort, die Körper. Dies ist ein großer Schmerz in den Arsch, da Sie nicht verwenden können gute REST-Praktiken. Siehe bug hier (its abgelegt unter jQuery, aber meine Vermutung ist, seine ein FF - bug scheint behoben zu sein im FF4).
5. Immer wieder die Header oben, nicht nur auf die OPTION Anfragen. FF braucht es in der Antwort von der POST.

InformationsquelleAutor rynop

1. Erstellen ein iFrame,
2. legen Sie ein Formular mit Hidden-inputs,
3. legen Sie das Formular Aktion zu der URL,
4. Hinzufügen iframe-Dokument
5. senden Sie das Formular

Pseudocode

 var ifr = document.createElement('iframe');
 var frm = document.createElement('form');
 frm.setAttribute("action", "yoururl");
 frm.setAttribute("method", "post");

 //create hidden inputs, add them
 //not shown, but similar (create, setAttribute, appendChild)

 ifr.appendChild(frm);
 document.body.appendChild(ifr);
 frm.submit();

Werden Sie wahrscheinlich wollen, um Stil der iframe ausgeblendet werden und absolut positioniert. Nicht sicher, dass cross-site-posting erlaubt über den browser, aber wenn das so ist, das ist, wie es zu tun.

InformationsquelleAutor Lou Franco

Wenn Sie haben Zugriff auf alle beteiligten Server, geben Sie Folgendes in den header der Antwort für die Seite angefordert wird, in der anderen Domäne:

PHP:

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

Beispielsweise in Drupal ' s xmlrpc.php code, den Sie dies tun:

function xmlrpc_server_output($xml) {
    $xml = '<?xml version="1.0"?>'."\n". $xml;
    header('Connection: close');
    header('Content-Length: '. strlen($xml));
    header('Access-Control-Allow-Origin: *');
    header('Content-Type: application/x-www-form-urlencoded');
    header('Date: '. date('r'));
    //$xml = str_replace("\n", " ", $xml); 

    echo $xml;
    exit;
}

Dies erzeugt möglicherweise ein Sicherheits-problem, und Sie sollten sicherstellen, dass Sie geeignete Maßnahmen, um die Anfrage prüfen.

InformationsquelleAutor Robb Lovell

1. Erstellen Sie zwei versteckte iframes (add "display: none;" zum css-Stil). Machen Sie Ihre zweite iframe zeigen Sie auf etwas auf Ihrer eigenen domain.

2. Erstellen Sie eine versteckte form, dessen Methode auf "post" target = Ihre erste iframe, und setzen Sie Optional enctype auf "multipart/form-data" (ich denke, Sie wollen, um die POST zu tun, weil Sie möchten, senden multipart-Daten wie Bilder?)

3. Wenn Sie bereit sind, machen die form submit() der POST.

4. Wenn du die andere domain zurück javascript, die die Cross-Domain-Kommunikation Mit Iframes ( http://softwareas.com/cross-domain-communication-with-iframes ), dann haben Sie Glück, und Sie können das erfassen der Antwort, wie auch.

Natürlich, wenn Sie wollen, um Ihren server als proxy, können Sie vermeiden, all dies. Senden Sie uns einfach das Formular auf Ihrem eigenen server, der proxy die Anforderung an den anderen server (vorausgesetzt, die anderen server nicht so eingerichtet ist, um zu bemerken, IP-Diskrepanzen), erhalten Sie die Antwort, und kehren Sie was Sie wollen.

InformationsquelleAutor Magarshak

Wenn Sie dies tun wollen, in ASP.net MVC-Umfeld mit JQuery, AJAX, gehen Sie folgendermaßen vor:
(dies ist eine Zusammenfassung der angebotenen Lösung an diese thread)

Davon ausgehen, dass "caller.com"(kann eine beliebige website) braucht, um post zu "server.com"(ein ASP.net MVC-Anwendung)

1. Auf dem "server.com" app-Web.config fügen Sie den folgenden Abschnitt:

     <httpProtocol>
         <customHeaders>
             <add name="Access-Control-Allow-Origin" value="*" />
             <add name="Access-Control-Allow-Headers" value="Content-Type" />
             <add name="Access-Control-Allow-Methods" value="POST, GET, OPTIONS" />
         </customHeaders>
     </httpProtocol>

2. Auf dem "server.com" wir haben Sie folgende Aktion auf dem controller(genannt "Home"), zu denen wir werde Entsendung:

   [HttpPost]
   public JsonResult Save()
   {
       //Handle the post data...
   
       return Json(
           new
           {
               IsSuccess = true
           });
   }

3. Dann von der "caller.com", post Daten aus einem Formular(mit der html-id "formId") zu "server.com" wie Folgen:

   $.ajax({
           type: "POST",
           url: "http://www.server.com/home/save",
           dataType: 'json',
           crossDomain: true,
           data: $(formId).serialize(),
           success: function (jsonResult) {
              //do what ever with the reply
           },
           error: function (jqXHR, textStatus) {
               //handle error
           }
       });

InformationsquelleAutor Sujeewa

Ich denke, der beste Weg ist die Verwendung von XMLHttpRequest (z.B. $.ajax(), $.post() in jQuery) mit einem Cross-Origin Resource Sharing polyfills https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills#wiki-CORS

InformationsquelleAutor Roman Dolgiy

Dies ist eine alte Frage, aber einige neue Technologie könnte helfen, jemanden.

Wenn Sie haben administrativen Zugriff auf den anderen server, dann können Sie die opensource-Schmiede-Projekt zu erreichen, Ihre cross-domain-POST. Forge bietet eine domänenübergreifende JavaScript-XmlHttpRequest-wrapper, die die Vorteile von Flash-raw-socket API. Die POST kann auch über TLS.

Der Grund, benötigen Sie administrativen Zugriff auf den server, den Sie Buchen ist, weil, müssen Sie eine cross-domain-policy, die es erlaubt den Zugriff aus der Domäne.

http://github.com/digitalbazaar/forge

InformationsquelleAutor dlongley

Sollte möglich sein, mit einem YQL benutzerdefinierte Tabelle + JS XHR, werfen Sie einen Blick auf:
http://developer.yahoo.com/yql/guide/index.html

Ich es verwenden, um einige client-Seite (js) html kratzen, funktioniert einwandfrei
(Ich habe eine volle audio-player, mit einer Suche im internet/Playlisten/lyrics/last fm Informationen, alle client-js + YQL)

InformationsquelleAutor Guillaume86

Wenn Sie Zugriff auf die cross-domain-server und nicht wollen, um irgendwelche änderungen am code auf der server-Seite, können Sie eine Bibliothek mit dem Namen - 'xdomain'.

Wie es funktioniert:

Schritt 1:
server 1: schließen Sie die xdomain-Bibliothek und konfigurieren von cross-domain als slave:

<script src="js/xdomain.min.js" slave="https://crossdomain_server/proxy.html"></script>

Schritt 2:
auf cross-domain-server, erstellen Sie eine proxy.html Datei-und server 1 als master:

proxy.html:
<!DOCTYPE HTML>
<script src="js/xdomain.min.js"></script>
<script>
  xdomain.masters({
    "https://server1" : '*'
  });
</script>

Schritt 3:

Nun, Sie können machen Sie einen AJAX-Aufruf an die proxy.html als Endpunkt von server1. Dies ist die bypass-CORS Anfrage. Die Bibliothek intern iframe-Lösung, die arbeitet mit Anmeldeinformationen und alle möglichen Methoden: GET, POST etc.

Abfrage ajax-code:

$.ajax({
        url: 'https://crossdomain_server/proxy.html',
        type: "POST",
        data: JSON.stringify(_data),
        dataType: "json",
        contentType: "application/json; charset=utf-8"
    })
    .done(_success)
    .fail(_failed)

InformationsquelleAutor Raj Malakpet