Permintaan CORS POST berfungsi dari JavaScript biasa, tetapi mengapa tidak dengan jQuery?

Saya mencoba membuat permintaan posting Cross Origin, dan saya membuatnya berfungsi dengan jelas JavaScriptseperti ini:

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

Tapi saya ingin menggunakan jQuery, tapi saya tidak bisa membuatnya bekerja. Inilah yang saya coba:

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

Ini menghasilkan Kegagalan. Jika ada yang tahu mengapa jQuerytidak berhasil, beri tahu kami semua. Terima kasih.

(Saya menggunakan jQuery1.5.1, dan Firefox 4.0, dan server saya merespons dengan Access-Control-Allow-Originheader yang tepat )

UPDATE: Seperti yang TimK tunjukkan, ini tidak diperlukan lagi dengan jquery 1.5.2. Tetapi jika Anda ingin menambahkan tajuk khusus atau mengizinkan penggunaan kredensial (nama pengguna, kata sandi, atau cookie, dll.), Baca terus.

Saya rasa saya menemukan jawabannya! (4 jam dan banyak kutukan nanti)

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

Anda perlu menentukan secara manual semua tajuk yang akan Anda terima (setidaknya itu yang saya alami di FF 4.0 & Chrome 10.0.648.204).

Metode $ .ajax jQuery mengirimkan header "x-diminta-dengan" untuk semua permintaan lintas domain (menurut saya ini hanya lintas domain).

Jadi header yang hilang yang diperlukan untuk menanggapi permintaan OPTIONS adalah:

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

Jika Anda meneruskan tajuk non "sederhana", Anda harus memasukkannya ke dalam daftar (saya mengirim satu lagi):

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

Jadi untuk menggabungkan semuanya, inilah PHP saya:

// * 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);
}

Kemungkinan lain adalah pengaturan tersebut dataType: jsonmenyebabkan JQuery mengirimkan Content-Type: application/jsonheader. Ini dianggap sebagai header non-standar oleh CORS, dan memerlukan permintaan preflight CORS. Jadi beberapa hal untuk dicoba:

1) Coba konfigurasikan server Anda untuk mengirim tanggapan sebelum penerbangan yang benar. Ini akan menjadi header tambahan seperti Access-Control-Allow-Methodsdan Access-Control-Allow-Headers.

2) Jatuhkan dataType: jsonpengaturan. JQuery harus meminta Content-Type: application/x-www-form-urlencodedsecara default, tetapi untuk memastikan, Anda dapat mengganti dataType: jsondengancontentType: 'application/x-www-form-urlencoded'

Anda mengirim "params" di js: request.send(params);

tetapi "data" di jquery ". Apakah data ditentukan ?: data:data,

Selain itu, Anda memiliki kesalahan di URL:

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

Anda mencampur sintaks dengan yang untuk $ .post

Pembaruan : Saya mencari-cari di Google berdasarkan jawaban monsur, dan saya menemukan bahwa Anda perlu menambahkan Access-Control-Allow-Headers: Content-Type(di bawah ini adalah paragraf lengkap)

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

Bagaimana CORS Bekerja

CORS bekerja sangat mirip dengan file crossdomain.xml Flash. Pada dasarnya, browser akan mengirimkan permintaan lintas-domain ke suatu layanan, menyetel asal HTTP header ke server yang meminta. Layanan ini menyertakan beberapa header seperti Access-Control-Allow-Origin untuk menunjukkan apakah permintaan semacam itu diizinkan.

Untuk manajer koneksi BOSH, cukup menentukan bahwa semua asal diperbolehkan, dengan mengatur nilai Access-Control-Allow-Origin ke *. Header Tipe Konten juga harus dicantumkan dalam daftar putih di header Access-Control-Allow-Headers.

Terakhir, untuk jenis permintaan tertentu, termasuk permintaan manajer koneksi BOSH, pemeriksaan izin akan dilakukan sebelumnya. Browser akan melakukan permintaan OPTIONS dan berharap mendapatkan kembali beberapa header HTTP yang menunjukkan asal yang diizinkan, metode mana yang diizinkan, dan berapa lama otorisasi ini akan bertahan. Misalnya, inilah patch Punjab dan ejabberd yang saya kembalikan untuk OPSI:

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

Cors mengubah metode permintaan sebelum selesai, dari POST ke OPTIONS, jadi, data posting Anda tidak akan dikirim. Cara yang berhasil untuk menangani masalah cors ini, melakukan permintaan dengan ajax, yang tidak mendukung metode OPTIONS. kode contoh:

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

dengan header ini di 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", "*");

Ubah Jquery Anda dengan cara berikut:

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