jquery - tool - title tags bilder




Wie funktioniert eine CORS-Postanforderung(Corross-Origin Resource Sharing)? (6)

ANFORDERN:

 $.ajax({
            url: "http://localhost:8079/students/add/",
            type: "POST",
            crossDomain: true,
            data: JSON.stringify(somejson),
            dataType: "json",
            success: function (response) {
                var resp = JSON.parse(response)
                alert(resp.status);
            },
            error: function (xhr, status) {
                alert("error");
            }
        });

ANTWORT:

response = HttpResponse(json.dumps('{"status" : "success"}'))
response.__setitem__("Content-type", "application/json")
response.__setitem__("Access-Control-Allow-Origin", "*")

return response

Ich habe eine Maschine auf meinem lokalen LAN (machineA), die zwei Webserver hat. Der erste ist der eingebaute in XBMC (auf Port 8080) und zeigt unsere Bibliothek an. Der zweite Server ist ein CherryPy-Python-Skript (Port 8081), mit dem ich bei Bedarf eine Dateikonvertierung auslösen kann. Die Dateikonvertierung wird durch eine AJAX POST-Anfrage von der Seite ausgelöst, die vom XBMC-Server bedient wird.

  • Gehe zu http: // machineA: 8080, die die Bibliothek anzeigt
  • Bibliothek wird angezeigt
  • Der Nutzer klickt auf den Link "Convert", der den folgenden Befehl ausgibt:

jQuery Ajax Anfrage

$.post('http://machineA:8081', {file_url: 'asfd'}, function(d){console.log(d)})
  • Der Browser gibt eine HTTP OPTIONS-Anfrage mit den folgenden Kopfzeilen aus;

Anforderungskopf - OPTIONEN

Host: machineA:8081
User-Agent: ... Firefox/4.01
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 115
Connection: keep-alive
Origin: http://machineA:8080
Access-Control-Request-Method: POST
Access-Control-Request-Headers: x-requested-with
  • Der Server antwortet mit folgendem;

Antwortheader - OPTIONS (STATUS = 200 OK)

Content-Length: 0
Access-Control-Allow-Headers: *
Access-Control-Max-Age: 1728000
Server: CherryPy/3.2.0
Date: Thu, 21 Apr 2011 22:40:29 GMT
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS
Content-Type: text/html;charset=ISO-8859-1
  • Die Unterhaltung stoppt dann. Der Browser sollte theoretisch eine POST-Anfrage ausgeben, da der Server mit den korrekten (?) CORS-Headern (Access-Control-Allow-Origin: *) geantwortet hat.

Zur Fehlerbehebung habe ich den gleichen $ .post-Befehl von http://jquery.com ausgegeben. Dies ist, wo ich ratlos bin, von jquery.com, die Post-Anfrage funktioniert, eine OPTIONS-Anfrage wird gefolgt von einem POST gesendet. Die Header von dieser Transaktion sind unten;

Anforderungskopf - OPTIONEN

Host: machineA:8081
User-Agent: ... Firefox/4.01
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 115
Connection: keep-alive
Origin: http://jquery.com
Access-Control-Request-Method: POST

Antwortheader - OPTIONS (STATUS = 200 OK)

Content-Length: 0
Access-Control-Allow-Headers: *
Access-Control-Max-Age: 1728000
Server: CherryPy/3.2.0
Date: Thu, 21 Apr 2011 22:37:59 GMT
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS
Content-Type: text/html;charset=ISO-8859-1

Anforderungsheader - POST

Host: machineA:8081
User-Agent: ... Firefox/4.01
Accept: */*
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 115
Connection: keep-alive
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Referer: http://jquery.com/
Content-Length: 12
Origin: http://jquery.com
Pragma: no-cache
Cache-Control: no-cache

Antwortheader - POST (STATUS = 200 OK)

Content-Length: 32
Access-Control-Allow-Headers: *
Access-Control-Max-Age: 1728000
Server: CherryPy/3.2.0
Date: Thu, 21 Apr 2011 22:37:59 GMT
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS
Content-Type: application/json

Ich kann nicht herausfinden, warum die gleiche Anfrage von einer Seite funktionieren würde, aber nicht die andere. Ich hoffe, jemand könnte darauf hinweisen, was ich vermisse. Danke für Ihre Hilfe!


Aus irgendeinem Grund wurde eine Frage zu GET-Anfragen mit dieser zusammengeführt, daher werde ich hier darauf antworten.

Diese einfache Funktion ruft asynchron eine HTTP-Statusantwort von einer CORS-aktivierten Seite ab. Wenn Sie es ausführen, sehen Sie, dass nur eine Seite mit den richtigen Headern einen 200-Status zurückgibt, wenn über XMLHttpRequest zugegriffen wird - ob GET oder POST verwendet wird. Auf der Clientseite kann nichts getan werden, um dies zu umgehen, außer möglicherweise JSONP zu verwenden, wenn Sie nur ein JSON-Objekt benötigen.

Folgendes kann leicht geändert werden, um die Daten im xmlHttpRequestObject Objekt zu erhalten:

function checkCorsSource(source) {
  var xmlHttpRequestObject;
  if (window.XMLHttpRequest) {
    xmlHttpRequestObject = new XMLHttpRequest();
    if (xmlHttpRequestObject != null) {
      var sUrl = "";
      if (source == "google") {
        var sUrl = "https://www.google.com";
      } else {
        var sUrl = "https://httpbin.org/get";
      }
      document.getElementById("txt1").innerHTML = "Request Sent...";
      xmlHttpRequestObject.open("GET", sUrl, true);
      xmlHttpRequestObject.onreadystatechange = function() {
        if (xmlHttpRequestObject.readyState == 4 && xmlHttpRequestObject.status == 200) {
          document.getElementById("txt1").innerHTML = "200 Response received!";
        } else {
          document.getElementById("txt1").innerHTML = "200 Response failed!";
        }
      }
      xmlHttpRequestObject.send();
    } else {
      window.alert("Error creating XmlHttpRequest object. Client is not CORS enabled");
    }
  }
}
<html>
<head>
  <title>Check if page is cors</title>
</head>
<body>
  <p>A CORS-enabled source has one of the following HTTP headers:</p>
  <ul>
    <li>Access-Control-Allow-Headers: *</li>
    <li>Access-Control-Allow-Headers: x-requested-with</li>
  </ul>
  <p>Click a button to see if the page allows CORS</p>
  <form name="form1" action="" method="get">
    <input type="button" name="btn1" value="Check Google Page" onClick="checkCorsSource('google')">
    <input type="button" name="btn1" value="Check Cors Page" onClick="checkCorsSource('cors')">
  </form>
  <p id="txt1" />
</body>
</html>


Dies ist eine Zusammenfassung dessen, was bei mir funktioniert hat:

Definieren Sie eine neue Funktion (um $.ajax gewickelt zu vereinfachen):

jQuery.postCORS = function(url, data, func) { if(func == undefined) func = function(){}; return $.ajax({ type: 'POST', url: url, data: data, dataType: 'json', contentType: 'application/x-www-form-urlencoded', xhrFields: { withCredentials: true }, success: function(res) { func(res) }, error: function() { func({}) }}); }

Verwendung:

$.postCORS("https://example.com/service.json",{ x : 1 },function(obj){
      if(obj.ok) {
           ...
      }
});

Funktioniert auch mit .done , .fail , etc:

$.postCORS("https://example.com/service.json",{ x : 1 }).done(function(obj){
      if(obj.ok) {
           ...
      }
}).fail(function(){
    alert("Error!");
});

Server-Seite (in diesem Fall wo example.com gehostet wird), setze diese Header (habe etwas Beispielcode in PHP hinzugefügt):

header('Access-Control-Allow-Origin: https://not-example.com');
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Max-Age: 604800');
header("Content-type: application/json");
$array = array("ok" => $_POST["x"]);
echo json_encode($array);

Dies ist die einzige Art und Weise, wie ich Crossdomänen von JS wirklich POSTIEREN kann.

JSONP konvertiert den POST in GET, wodurch möglicherweise vertrauliche Informationen in Serverprotokollen angezeigt werden.


Ich bin schließlich auf diesen Link gestoßen. " Eine CORS POST-Anfrage funktioniert von einfachem JavaScript, aber warum nicht mit jQuery? ", Die feststellt, dass jQuery 1.5.1 den

 Access-Control-Request-Headers: x-requested-with

Header zu allen CORS-Anfragen. jQuery 1.5.2 tut dies nicht. Auch, nach der gleichen Frage, ein Server-Antwort-Header von

Access-Control-Allow-Headers: *

Die Antwort kann nicht fortgesetzt werden. Sie müssen sicherstellen, dass der Antwortheader speziell die erforderlichen Header enthält. zB:

Access-Control-Allow-Headers: x-requested-with 

Ich habe mein eigenes Problem gelöst, als ich die Google-Distanzmatrix-API nutzte, indem ich meinen Anfrage-Header mit Jquery ajax setzte. schaue unten nach.

var settings = {
          'cache': false,
          'dataType': "jsonp",
          "async": true,
          "crossDomain": true,
          "url": "https://maps.googleapis.com/maps/api/distancematrix/json?units=metric&origins=place_id:"+me.originPlaceId+"&destinations=place_id:"+me.destinationPlaceId+"&region=ng&units=metric&key=mykey",
          "method": "GET",
          "headers": {
              "accept": "application/json",
              "Access-Control-Allow-Origin":"*"
          }
      }

      $.ajax(settings).done(function (response) {
          console.log(response);

      });

Beachten Sie, was ich in den Einstellungen hinzugefügt habe
**

"headers": {
          "accept": "application/json",
          "Access-Control-Allow-Origin":"*"
      }

**
Ich hoffe das hilft.


In Verbindung mit Laravel löste ich mein Problem. Fügen Sie diesen Header einfach zu Ihrer jquery-Anfrage Access-Control-Request-Headers: x-requested-with requests Access-Control-Request-Headers: x-requested-with und stellen Sie sicher, dass Ihre Server-Side-Response diesen Header-Satz Access-Control-Allow-Headers: * .





cors