Wie sende ich eine domänenübergreifende POST-Anfrage über JavaScript?

568

Wie sende ich eine domänenübergreifende POST-Anfrage über JavaScript?

Hinweise - Die Seite sollte nicht aktualisiert werden, und ich muss die Antwort anschließend abrufen und analysieren.

Ido Schacham
quelle
Ich möchte ein wenig über den Anwendungsfall wissen, mit dem Sie dies versuchen können. Könnten Sie bitte etwas darüber erzählen?
Mkoeller
Grundsätzlich arbeite ich an einem Skript, das Text aus einer HTML-Datei zur Verarbeitung an einen anderen Server senden muss.
Ido Schacham
3
Können Sie einen Proxy einrichten, der dies auf der Serverseite ausführt und Ihrem Skript nur das Ergebnis gibt? Oder muss es 100% JavaScript sein?
Sasha Chedygov

Antworten:

382

Update: Bevor Sie fortfahren, sollten alle das html5rocks-Tutorial zu CORS lesen und verstehen . Es ist leicht zu verstehen und sehr klar.

Wenn Sie den POST-Server steuern, nutzen Sie einfach den "Standard für die gemeinsame Nutzung von Ressourcen", indem Sie auf dem Server Antwortheader festlegen. Diese Antwort wird in anderen Antworten in diesem Thread diskutiert, aber meiner Meinung nach nicht sehr klar.

Kurz gesagt, hier erfahren Sie, wie Sie den domänenübergreifenden POST von from.com/1.html zu to.com/postHere.php durchführen (am Beispiel von PHP). Hinweis: Sie müssen nur Access-Control-Allow-OriginNON- OPTIONSAnforderungen festlegen. In diesem Beispiel werden immer alle Header für ein kleineres Code-Snippet festgelegt.

  1. In postHere.php richten Sie Folgendes ein:

    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;
    }

    Auf diese Weise kann Ihr Skript domänenübergreifende POST, GET und OPTIONEN erstellen. Dies wird deutlich, wenn Sie weiterlesen ...

  2. Richten Sie Ihren domänenübergreifenden POST über JS ein (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 Sie den POST in Schritt 2 ausführen, sendet Ihr Browser eine "OPTIONS" -Methode an den Server. Dies ist ein "Schnüffeln" des Browsers, um zu sehen, ob der Server cool ist, wenn Sie darauf posten. Der Server antwortet mit einem "Access-Control-Allow-Origin", der dem Browser mitteilt, dass POST | GET | ORIGIN in Ordnung ist, wenn die Anfrage von " http://from.com " oder " https://from.com " stammt. Da der Server damit einverstanden ist, stellt der Browser eine zweite Anfrage (diesmal einen POST). Es wird empfohlen, dass Ihr Client den Inhaltstyp festlegt, den er sendet. Daher müssen Sie dies ebenfalls zulassen.

MDN hat eine großartige Beschreibung der HTTP-Zugriffskontrolle , die detailliert beschreibt, wie der gesamte Ablauf funktioniert. Laut ihren Dokumenten sollte es "in Browsern funktionieren, die standortübergreifendes XMLHttpRequest unterstützen". Dies ist jedoch etwas irreführend, da ich denke, dass nur moderne Browser domänenübergreifende POST zulassen. Ich habe nur überprüft, dass dies mit Safari, Chrome, FF 3.6 funktioniert.

Beachten Sie dabei Folgendes:

  1. Ihr Server muss 2 Anforderungen pro Vorgang verarbeiten
  2. Sie müssen über die Auswirkungen auf die Sicherheit nachdenken. Seien Sie vorsichtig, bevor Sie etwas wie 'Access-Control-Allow-Origin: *' ausführen.
  3. Dies funktioniert nicht in mobilen Browsern. Nach meiner Erfahrung erlauben sie überhaupt keinen domänenübergreifenden POST. Ich habe Android, iPad, iPhone getestet
  4. Es gibt einen ziemlich großen Fehler in FF <3.6. Wenn der Server einen Antwortcode ungleich 400 zurückgibt UND ein Antworttext vorhanden ist (z. B. Validierungsfehler), erhält FF 3.6 den Antworttext nicht. Dies ist ein großer Schmerz im Arsch, da Sie keine guten REST-Praktiken anwenden können. Siehe Fehler hier (es ist unter jQuery abgelegt, aber ich vermute, es ist ein FF-Fehler - scheint in FF4 behoben zu sein).
  5. Geben Sie immer die obigen Header zurück, nicht nur bei OPTION-Anforderungen. FF benötigt es in der Antwort vom POST.
rynop
quelle
Kann es zum Beispiel HTML zurückgeben? Ich muss HTML zurückgeben und etwas funktioniert nicht ...
denis_n
Ja, das solltest du können. Ich habe es nie versucht. Ihr Server gibt 200 zurück? Gibt Ihr Server auch die Header für die OPTIONs AND POST-Anforderungen zurück? Ich habe meine Antwort mit mehr Details dazu aktualisiert. Stellen Sie sicher, dass Ihr Server auch mit dem richtigen Header für den Inhaltstyp antwortet (z. B. Text / HTML). Ich empfehle, Google Chrome zu verwenden. Klicken Sie mit der rechten Maustaste auf Seite> Element überprüfen. Klicken Sie auf die Registerkarte Netzwerk und sehen Sie sich den POST und die Antwort an. Sollte Ihnen Informationen darüber geben, was falsch läuft.
Rynop
Ich habe es versucht, bekomme es aber trotzdem 400 Bad Requestauf OPTIONSAnfrage. und in firefoxder zweiten Anfrage POSTwird nie gemacht. :(
Zain Shaikh
Gibt es eine Möglichkeit, Ihren lokalen Computer in der obigen case-Anweisung aufzurufen? Oder müssen Sie in diesem Fall nur das * für die zulässigen Ursprünge verwenden.
Todd Vance
1
Dies wurde zuletzt vor 4 Jahren bearbeitet - funktioniert dies jetzt in mobilen Browsern?
Frankpinto
121

Wenn Sie den Remote-Server steuern, sollten Sie wahrscheinlich CORS verwenden, wie in dieser Antwort beschrieben . Es wird in IE8 und höher sowie in allen neueren Versionen von FF, GC und Safari unterstützt. (In IE8 und 9 können Sie mit CORS jedoch keine Cookies in der Anfrage senden.)

Wenn Sie also den Remote-Server nicht steuern oder IE7 unterstützen müssen oder wenn Sie Cookies benötigen und IE8 / 9 unterstützen müssen, möchten Sie wahrscheinlich eine Iframe-Technik verwenden.

  1. Erstellen Sie einen Iframe mit einem eindeutigen Namen. (iframes verwenden einen globalen Namespace für den gesamten Browser. Wählen Sie daher einen Namen aus, den keine andere Website verwenden wird.)
  2. Erstellen Sie ein Formular mit versteckten Eingaben, das auf den Iframe abzielt.
  3. Senden Sie das Formular.

Hier ist Beispielcode; Ich habe es auf IE6, IE7, IE8, IE9, FF4, GC11, S5 getestet.

function crossDomainPost() {
  // Add the iframe with a unique name
  var iframe = document.createElement("iframe");
  var uniqueString = "CHANGE_THIS_TO_SOME_UNIQUE_STRING";
  document.body.appendChild(iframe);
  iframe.style.display = "none";
  iframe.contentWindow.name = uniqueString;

  // construct a form with hidden inputs, targeting the iframe
  var form = document.createElement("form");
  form.target = uniqueString;
  form.action = "http://INSERT_YOUR_URL_HERE";
  form.method = "POST";

  // repeat for each parameter
  var input = document.createElement("input");
  input.type = "hidden";
  input.name = "INSERT_YOUR_PARAMETER_NAME_HERE";
  input.value = "INSERT_YOUR_PARAMETER_VALUE_HERE";
  form.appendChild(input);

  document.body.appendChild(form);
  form.submit();
}

In acht nehmen! Sie können die Antwort des POST nicht direkt lesen, da der Iframe in einer separaten Domäne vorhanden ist. Frames dürfen nicht aus verschiedenen Domänen miteinander kommunizieren. Dies ist die Richtlinie mit demselben Ursprung .

Wenn Sie den Remote-Server steuern, aber CORS nicht verwenden können (z. B. weil Sie sich in IE8 / IE9 befinden und Cookies verwenden müssen), gibt es Möglichkeiten, die Richtlinie mit demselben Ursprung zu umgehen, z. B. mithilfe von window.postMessageund / oder Eine von mehreren Bibliotheken, mit denen Sie domänenübergreifende Frame-Nachrichten in älteren Browsern senden können:

Wenn Sie den Remote-Server nicht steuern, können Sie die Antwort des POST-Zeitraums nicht lesen. Andernfalls würde es zu Sicherheitsproblemen kommen.

Dan Fabulich
quelle
2
Sie müssen form.target auf etwas setzen, sonst navigiert der Browser von Ihrer Site weg zur URL der Formularaktion. Darüber hinaus muss die Zeichenfolge eindeutig sein. Wenn andere Frames oder Fenster mit demselben Namen vorhanden sind, kann das Formular anstelle Ihres Iframes in diesem Fenster veröffentlicht werden. Aber wie einzigartig muss es sein? Wahrscheinlich nicht sehr. Die Wahrscheinlichkeit von Überfällen ist ziemlich gering. Achselzucken
Dan Fabulich
1
@Nawaz Wie ich in meiner Antwort sagte, müssen Sie domänenübergreifende Kommunikation durchführen, um das Ergebnis auf Ihrer Webseite zu erhalten. Dazu müssen Sie den Remote-Webserver steuern, damit Sie seine Antwort ändern können, um die Kommunikation mit Ihrer Webseite zu ermöglichen. (Zum einen muss der Server mit HTML antworten; wenn der Server mit
unformatiertem
1
+1 - Dies ist die beste Lösung, die ich gefunden habe, wenn Sie keinen Zugriff auf den Server haben
James Long
1
@VojtechB Nein, das wäre eine Sicherheitslücke.
Dan Fabulich
1
@Andrus Sie können das Ergebnis des POST lesen, aber nur, wenn Sie den Server steuern! In dieser Antwort heißt es: "Mach X auf dem Absender [Client], mach Y auf dem Empfänger [Server]." Wenn Sie den Empfänger / Server nicht steuern, können Sie Y nicht ausführen und daher das Ergebnis des POST nicht lesen.
Dan Fabulich
48
  1. Erstellen Sie einen iFrame,
  2. füge ein Formular mit versteckten Eingaben ein,
  3. Setzen Sie die Aktion des Formulars auf die URL.
  4. Iframe zum Dokument hinzufügen
  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();

Sie möchten wahrscheinlich den Iframe stylen, versteckt und absolut positioniert sein. Der Browser ist sich nicht sicher, ob Cross-Site-Postings zulässig sind. In diesem Fall ist dies jedoch die Vorgehensweise.

Lou Franco
quelle
4
Tatsächlich ist dies etwas ungenau, da ifr.appendChild (frm); wird nicht funktionieren. Der iframe ist ein Verweis auf ein Fensterobjekt, und die appendChild-Methode ist dafür nicht vorhanden. Sie müssen zuerst den Dokumentknoten im Iframe abrufen. Dies erfordert eine funktionsübergreifende Funktionserkennung.
Rakesh Pai
Vielen Dank. Diese nützlichen Links zu diesem Thema wurden gefunden: bindzus.wordpress.com/2007/12/24/… developer.apple.com/internet/webcontent/iframe.html
Ido Schacham
19
Problem! Die empfangene Antwort im Iframe liegt in einer anderen Domäne, sodass das Hauptfenster keinen Zugriff darauf hat und der Iframe auch keinen Zugriff auf das Hauptfenster hat. Diese Lösung scheint also nur für den POST gut zu sein, aber Sie können die Antwort danach nicht mehr analysieren :(
Ido Schacham
2
Versuchen Sie, im Body-Tag der Antwort einen Onload für eine JavaScript-Funktion festzulegen, die eine Funktion im übergeordneten Element mit der Antwortzeichenfolge aufruft.
Lou Franco
Diese Antwort hat bei mir nicht funktioniert; Ich habe unten meine eigene Variante gepostet.
Dan Fabulich
24

Halte es einfach:

  1. domänenübergreifender POST:
    VerwendencrossDomain: true,

  2. Die Seite sollte nicht aktualisiert werden:
    Nein, die Seite wird nicht aktualisiert, da dersuccessodererrorasynchrone Rückruf aufgerufen wird, wenn der Server die Antwort zurücksendet.


Beispielskript:

$.ajax({
        type: "POST",
        url: "http://www.yoururl.com/",
        crossDomain: true,
        data: 'param1=value1&param2=value2',
        success: function (data) {
            // do something with server response data
        },
        error: function (err) {
            // handle your error logic here
        }
    });
Alain Gauthier
quelle
8
crossDomain: truehat seltsamerweise absolut nichts mit echten domänenübergreifenden Anfragen zu tun. Wenn die Anforderung domänenübergreifend ist, setzt jquery dies automatisch auf true.
Kevin B
16

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

PHP:

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

Im xmlrpc.php-Code von Drupal würden Sie beispielsweise Folgendes 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 führt wahrscheinlich zu einem Sicherheitsproblem, und Sie sollten sicherstellen, dass Sie die entsprechenden Maßnahmen ergreifen, um die Anforderung zu überprüfen.

Robb Lovell
quelle
6
  1. Erstellen Sie zwei versteckte Iframes (fügen Sie dem CSS-Stil "display: none;" hinzu). Stellen Sie Ihren zweiten Iframe auf etwas in Ihrer eigenen Domain.

  2. Erstellen Sie ein verstecktes Formular, setzen Sie seine Methode auf "post" mit target = Ihrem ersten Iframe und setzen Sie den Enctype optional auf "multipart / form-data" (ich denke, Sie möchten POST ausführen, weil Sie mehrteilige Daten wie Bilder senden möchten ?)

  3. Wenn Sie fertig sind, senden Sie das Formular an den POST ().

  4. Wenn Sie die andere Domain dazu bringen können, Javascript zurückzugeben, das die domänenübergreifende Kommunikation mit Iframes ( http://softwareas.com/cross-domain-communication-with-iframes ) ausführt, haben Sie Glück und können die Antwort erfassen auch.

Wenn Sie Ihren Server als Proxy verwenden möchten, können Sie dies natürlich vermeiden. Senden Sie das Formular einfach an Ihren eigenen Server, der die Anforderung an den anderen Server weiterleitet (vorausgesetzt, der andere Server ist nicht so eingerichtet, dass IP-Diskrepanzen festgestellt werden), erhalten Sie die Antwort und geben Sie zurück, was Sie möchten.

Magarshak
quelle
6

Noch eine wichtige Sache zu beachten !!! Im obigen Beispiel wird die Verwendung beschrieben

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

JQuery 1.6 und niedriger hat einen Fehler mit domänenübergreifender XHR. Laut Firebug wurden keine Anfragen außer OPTIONEN gesendet. Keine Post. Überhaupt.

Verbrachte 5 Stunden damit, meinen Code zu testen / zu optimieren. Hinzufügen vieler Header auf dem Remote-Server (Skript). Ohne Wirkung. Aber später habe ich JQuery lib auf 1.6.4 aktualisiert und alles funktioniert wie ein Zauber.

BasTaller
quelle
Whoopps, nicht in Opera 10.61. Meine endgültige Entscheidung war, PHP-Proxy für meine Domain zu verwenden.
BasTaller
Wie haben Sie den PHP-Proxy verwendet? Kannst du mich dazu führen?
Zoran777
siehe die Antworten unten, zB von Ivan Durst
BasTaller
5

Wenn Sie dies in einer ASP.net MVC-Umgebung mit JQuery AJAX tun möchten, gehen Sie folgendermaßen vor: (Dies ist eine Zusammenfassung der in diesem Thread angebotenen Lösung. )

Angenommen, "caller.com" (kann eine beliebige Website sein) muss auf "server.com" (einer ASP.net MVC-Anwendung) posten.

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

      <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 "server.com" haben wir die folgende Aktion auf dem Controller ("Home" genannt), auf dem wir veröffentlichen werden:

    [HttpPost]
    public JsonResult Save()
    {
        //Handle the post data...
    
        return Json(
            new
            {
                IsSuccess = true
            });
    }
  3. Senden Sie dann von "caller.com" Daten aus einem Formular (mit der HTML-ID "formId") wie folgt an "server.com":

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

Es gibt noch einen weiteren Weg (mit der HTML5-Funktion). Sie können einen Proxy-Iframe verwenden, der in dieser anderen Domäne gehostet wird. Sie senden eine Nachricht mit postMessage an diesen Iframe. Dieser Iframe kann dann POST-Anforderungen (in derselben Domäne) und postMessage mit Reposnse an das übergeordnete Fenster zurückgeben.

Eltern auf sender.com

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

function get(event) {
    if (event.origin === "http://reciver.com") {
        // event.data is response from 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, "*");
        });
    }
}
// don't know if we can use jQuery here
if (window.addEventListener){
    addEventListener("message", listener, false)
} else {
    attachEvent("onmessage", listener)
}
jcubic
quelle
Es gibt verwandte Fragen in stackoverflow.com/questions/38940932/… . Ist es möglich, basierend auf Ihrem Beispiel ein Plugin oder eine generische Funktion zu erstellen?
Andrus
@Andrus vielleicht so etwas wie dieses gist.github.com/jcubic/26f806800abae0db9a0dfccd88cf6f3c
jcubic
Dieser Code erfordert das Ändern der Empfängerseite. Wie lese ich die Antwort, wenn die Empfängerseiten nicht geändert werden können?
Andrus
@Andrus Sie können nicht müssen Sie Zugriff auf Recever.com Iframe haben, um Ajax-Anfragen dort zu senden. Ohne iframe gibt es keine Anfragen.
Jcubic
3

High Level .... Sie müssen einen cname-Setup auf Ihrem Server haben, damit other-serve.your-server.com auf other-server.com verweist.

Ihre Seite erstellt dynamisch einen unsichtbaren Iframe, der als Transport zu other-server.com dient. Sie müssen dann über JS von Ihrer Seite zu other-server.com kommunizieren und Rückrufe erhalten, die die Daten an Ihre Seite zurückgeben.

Möglich, erfordert jedoch eine Koordination von your-server.com und other-server.com


quelle
Ich habe nicht einmal daran gedacht, einen CNAME zum Umleiten zu verwenden. Guter Anruf! Ich habe dies noch nicht versucht, gehe aber davon aus, dass der CNAME den Browser dazu verleitet, zu glauben, dass er mit derselben Site interagiert. Ich werde es verwenden, um auf Amazon S3 zu posten, also hoffe ich, dass dies funktioniert.
SpencerElliott
1
Ich sehe nicht, wie das irgendetwas lösen würde. Das Überqueren zu einer anderen Subdomain hat die gleichen Probleme wie das Überqueren zu einer anderen Domain.
Octopus
2

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

Wenn Sie Administratorzugriff auf den anderen Server haben, können Sie das OpenSource-Forge-Projekt verwenden, um Ihren domänenübergreifenden POST durchzuführen. Forge bietet einen domänenübergreifenden JavaScript XmlHttpRequest-Wrapper, der die Raw-Socket-API von Flash nutzt. Der POST kann sogar über TLS erfolgen.

Der Grund, warum Sie Administratorzugriff auf den Server benötigen, auf den Sie POSTEN, besteht darin, dass Sie eine domänenübergreifende Richtlinie bereitstellen müssen, die den Zugriff von Ihrer Domäne aus ermöglicht.

http://github.com/digitalbazaar/forge

dlongley
quelle
2

Ich weiß, dass dies eine alte Frage ist, aber ich wollte meinen Ansatz teilen. Ich benutze cURL als Proxy, sehr einfach und konsistent. Erstellen Sie eine PHP-Seite mit dem Namen submit.php und fügen Sie den folgenden Code hinzu:

<?

function post($url, $data) {
$header = array("User-Agent: " . $_SERVER["HTTP_USER_AGENT"], "Content-Type: application/x-www-form-urlencoded");
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_HTTPHEADER, $header);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($curl, CURLOPT_POST, 1);
curl_setopt($curl, CURLOPT_POSTFIELDS, $data);
$response = curl_exec($curl);
curl_close($curl);
return $response;
}

$url = "your cross domain request here";
$data = $_SERVER["QUERY_STRING"];
echo(post($url, $data));

Dann in Ihrem js (jQuery hier):

$.ajax({
type: 'POST',
url: 'submit.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.');
}
});
Ivan Durst
quelle
1

Sollte dies mit einer benutzerdefinierten YQL-Tabelle + JS XHR möglich sein, sehen Sie sich Folgendes an: http://developer.yahoo.com/yql/guide/index.html

Ich benutze es, um einige clientseitige (js) HTML-Scraping zu machen, funktioniert gut (ich habe einen vollständigen Audio-Player, mit Suche im Internet / Wiedergabelisten / Texten / letzten FM-Informationen, alle Client-js + YQL)

Guillaume86
quelle
1

CORS ist für Sie. CORS ist "Cross Origin Resource Sharing" und eine Möglichkeit zum Senden domänenübergreifender Anforderungen. Jetzt unterstützen sowohl die XMLHttpRequest2- als auch die Fetch-API CORS und können sowohl POST- als auch GET-Anforderungen senden

Aber es hat seine Grenzen. Der Server muss den Access-Control-Allow-Origin spezifisch beanspruchen und kann nicht auf '*' gesetzt werden.

Und wenn Sie möchten, dass ein Ursprung eine Anfrage an Sie senden kann, benötigen Sie JSONP (Sie müssen auch Access-Control-Allow-Origin festlegen , können aber '*' sein).

Wenn Sie nicht wissen, wie Sie eine Auswahl treffen sollen, benötigen Sie wahrscheinlich eine voll funktionsfähige Komponente. Lassen Sie mich eine einfache Komponente https://github.com/Joker-Jelly/catta vorstellen


Wenn Sie einen modernen Browser verwenden (> IE9, Chrome, FF, Edge usw.), empfehlen wir Ihnen, eine einfache, aber schöne Komponente zu verwenden: https://github.com/Joker-Jelly/catta. Es besteht keine Abhängigkeit, weniger als 3 KB, und es unterstützt Fetch, AJAX und JSONP mit der gleichen tödlichen Beispielsyntax und -optionen.

catta('./data/simple.json').then(function (res) {
  console.log(res);
});

Es unterstützt auch den gesamten Import in Ihr Projekt, wie ES6-Modul, CommonJS und sogar <script>in HTML.

Gelee
quelle
1

Wenn Sie Zugriff auf den domänenübergreifenden Server haben und auf der Serverseite keine Codeänderungen vornehmen möchten, können Sie eine Bibliothek mit dem Namen "xdomain" verwenden.

Wie es funktioniert:

Schritt 1: Server 1: Fügen Sie die xdomain-Bibliothek hinzu und konfigurieren Sie die domänenübergreifende Funktion als Slave:

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

Schritt 2: Erstellen Sie auf einem domänenübergreifenden Server eine proxy.html-Datei und fügen Sie Server 1 als Master hinzu:

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

Schritt 3:

Jetzt können Sie von server1 aus einen AJAX-Aufruf an die Datei proxy.html als Endpunkt senden. Dies umgeht die CORS-Anforderung. Die Bibliothek verwendet intern die iframe-Lösung, die mit Anmeldeinformationen und allen möglichen Methoden funktioniert: GET, POST usw.

Ajax-Code abfragen:

$.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)
Raj Malakpet
quelle