Eine CORS POST-Anfrage funktioniert mit einfachem JavaScript, aber warum nicht mit jQuery?

Ich versuche, eine Cross Origin-Post-Anfrage zu stellen, und ich habe sie so einfach zum JavaScriptLaufen gebracht:

var request = new XMLHttpRequest();
var params = "action=something";
request.open('POST', url, true);
request.onreadystatechange = function() {if (request.readyState==4) alert("It worked!");};
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.setRequestHeader("Content-length", params.length);
request.setRequestHeader("Connection", "close");
request.send(params);

Aber ich würde es gerne benutzen jQuery, aber ich kann es nicht zum Laufen bringen. Das versuche ich:

$.ajax(url, {
    type:"POST",
    dataType:"json",
    data:{action:"something"}, 
    success:function(data, textStatus, jqXHR) {alert("success");},
    error: function(jqXHR, textStatus, errorThrown) {alert("failure");}
});

Dies führt zu einem Fehler. Wenn jemand weiß, warum jQueryes nicht funktioniert, lassen Sie es uns bitte alle wissen. Vielen Dank.

(Ich verwende jQuery1.5.1 und Firefox 4.0 und mein Server antwortet mit einem richtigen Access-Control-Allow-OriginHeader.)

UPDATE: Wie TimK betonte, wird dies mit jquery 1.5.2 nicht mehr benötigt. Wenn Sie jedoch benutzerdefinierte Header hinzufügen oder die Verwendung von Anmeldeinformationen (Benutzername, Kennwort oder Cookies usw.) zulassen möchten, lesen Sie weiter.

Ich glaube ich habe die Antwort gefunden! (4 Stunden und viel Fluchen später)

//This does not work!!
Access-Control-Allow-Headers: *

Sie müssen alle Header, die Sie akzeptieren, manuell angeben (zumindest war dies bei FF 4.0 und Chrome 10.0.648.204 der Fall).

Die $ .ajax-Methode von jQuery sendet den Header "x-request-with" für alle domänenübergreifenden Anforderungen (ich denke, es ist die einzige domänenübergreifende Methode).

Der fehlende Header, der zur Beantwortung der OPTIONS-Anforderung benötigt wird, lautet also:

//no longer needed as of jquery 1.5.2
Access-Control-Allow-Headers: x-requested-with

Wenn Sie nicht "einfache" Header übergeben, müssen Sie diese in Ihre Liste aufnehmen (ich sende noch eine):

//only need part of this for my custom header
Access-Control-Allow-Headers: x-requested-with, x-requested-by

Um alles zusammenzufassen, hier ist mein PHP:

// * wont work in FF w/ Allow-Credentials
//if you dont need Allow-Credentials, * seems to work
header('Access-Control-Allow-Origin: http://www.example.com');
//if you need cookies or login etc
header('Access-Control-Allow-Credentials: true');
if ($this->getRequestMethod() == 'OPTIONS')
{
  header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');
  header('Access-Control-Max-Age: 604800');
  //if you need special headers
  header('Access-Control-Allow-Headers: x-requested-with');
  exit(0);
}

Eine andere Möglichkeit besteht darin, dataType: jsondass JQuery durch die Einstellung den Content-Type: application/jsonHeader sendet . Dies wird von CORS als nicht standardmäßiger Header betrachtet und erfordert eine CORS-Preflight-Anforderung. Also ein paar Dinge zum Ausprobieren:

1) Versuchen Sie, Ihren Server so zu konfigurieren, dass die richtigen Preflight-Antworten gesendet werden. Dies erfolgt in Form von zusätzlichen Headern wie Access-Control-Allow-Methodsund Access-Control-Allow-Headers.

2) Löschen Sie die dataType: jsonEinstellung. JQuery sollte verlangen Content-Type: application/x-www-form-urlencodedstandardmäßig, aber nur um sicher zu sein, können Sie ersetzen dataType: jsonmitcontentType: 'application/x-www-form-urlencoded'

Sie senden "params" in js: request.send(params);

aber "Daten" in jquery ". Sind Daten definiert?: data:data,

Außerdem haben Sie einen Fehler in der URL:

$.ajax( {url:url,
         type:"POST",
         dataType:"json",
         data:data, 
         success:function(data, textStatus, jqXHR) {alert("success");},
         error: function(jqXHR, textStatus, errorThrown) {alert("failure");}
});

Sie mischen die Syntax mit der für $ .post

Update : Ich habe basierend auf der Monsur-Antwort gegoogelt und festgestellt, dass Sie etwas hinzufügen müssen Access-Control-Allow-Headers: Content-Type(unten ist der vollständige Absatz).

http://metajack.im/2010/01/19/crossdomain-ajax-for-xmpp-http-binding-made-easy/

Wie funktioniert CORS?

CORS funktioniert sehr ähnlich wie die Datei crossdomain.xml von Flash. Grundsätzlich sendet der Browser eine domänenübergreifende Anfrage an einen Dienst und setzt den HTTP-Header Origin auf den anfordernden Server. Der Dienst enthält einige Header wie Access-Control-Allow-Origin, um anzugeben, ob eine solche Anforderung zulässig ist.

Für die BOSH-Verbindungsmanager reicht es aus, anzugeben, dass alle Ursprünge zulässig sind, indem der Wert von Access-Control-Allow-Origin auf * gesetzt wird. Der Content-Type-Header muss auch im Header Access-Control-Allow-Headers auf der weißen Liste stehen.

Schließlich wird für bestimmte Arten von Anforderungen, einschließlich BOSH-Verbindungsmanageranforderungen, die Berechtigungsprüfung vor dem Flug durchgeführt. Der Browser führt eine OPTIONS-Anforderung durch und erwartet, dass einige HTTP-Header zurückgegeben werden, die angeben, welche Ursprünge zulässig sind, welche Methoden zulässig sind und wie lange diese Autorisierung dauert. Hier sind zum Beispiel die Punjab- und Ejabberd-Patches, die ich für OPTIONEN zurückgegeben habe:

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-Type 
Access-Control-Max-Age: 86400

Cors ändern die Anforderungsmethode, bevor sie abgeschlossen ist, von POST zu OPTIONS, sodass Ihre Post-Daten nicht gesendet werden. Die Art und Weise, wie dieses Cors-Problem behandelt wurde, besteht darin, die Anforderung mit Ajax auszuführen, das die OPTIONS-Methode nicht unterstützt. Beispielcode:

        $.ajax({
            type: "POST",
            crossdomain: true,
            url: "http://localhost:1415/anything",
            dataType: "json",
            data: JSON.stringify({
                anydata1: "any1",
                anydata2: "any2",
            }),
            success: function (result) {
                console.log(result)
            },
            error: function (xhr, status, err) {
                console.error(xhr, status, err);
            }
        });

mit diesen Headern auf c # Server:

                    if (request.HttpMethod == "OPTIONS")
                    {
                          response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept, X-Requested-With");
                          response.AddHeader("Access-Control-Allow-Methods", "GET, POST");
                          response.AddHeader("Access-Control-Max-Age", "1728000");
                    }
                    response.AppendHeader("Access-Control-Allow-Origin", "*");

Ändern Sie Ihre JQuery wie folgt:

$.ajax({
            url: someurl,
            contentType: 'application/json',
            data: JSONObject,
            headers: { 'Access-Control-Allow-Origin': '*' }, //add this line
            dataType: 'json',
            type: 'POST',                
            success: function (Data) {....}
});