Bir CORS POST isteği düz JavaScript'ten çalışır, ancak neden jQuery ile çalışmasın?

Bir Cross Origin gönderi talebinde bulunmaya çalışıyorum ve bunu JavaScriptşu şekilde düz bir şekilde çalıştırdım :

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

Ama kullanmak isterdim jQueryama işe yarayamıyorum. Denediğim şey bu:

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

Bu, Başarısızlıkla sonuçlanır. Neden jQueryişe yaramadığını bilen varsa , lütfen bize bildirin. Teşekkürler.

( jQuery1.5.1 ve Firefox 4.0 kullanıyorum ve sunucum uygun bir Access-Control-Allow-Originbaşlık ile yanıt veriyor)

GÜNCELLEME: TimK'in belirttiği gibi, buna artık jquery 1.5.2 ile gerek kalmadı. Ancak, özel başlıklar eklemek veya kimlik bilgilerinin (kullanıcı adı, şifre veya çerezler, vb.) Kullanımına izin vermek istiyorsanız, okumaya devam edin.

Sanırım cevabı buldum! (4 saat ve bir sürü küfür sonra)

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

Kabul edeceğiniz tüm başlıkları manuel olarak belirtmeniz gerekir (en azından benim için FF 4.0 ve Chrome 10.0.648.204'te durum buydu).

jQuery'nin $ .ajax yöntemi, tüm etki alanları arası istekler için "x-istenilen-ile" başlığını gönderir (sanırım tek etki alanları arası).

Dolayısıyla, OPTIONS isteğine yanıt vermek için gereken eksik başlık şudur:

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

"Basit" olmayan herhangi bir başlık aktarıyorsanız, bunları listenize eklemeniz gerekir (bir tane daha gönderirim):

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

Hepsini bir araya getirmek için işte PHP'im:

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

Başka bir olasılık da, ayarın dataType: jsonJQuery'nin Content-Type: application/jsonbaşlığı göndermesine neden olmasıdır . Bu, CORS tarafından standart olmayan bir başlık olarak kabul edilir ve bir CORS ön kontrol isteği gerektirir. Öyleyse denenecek birkaç şey:

1) Sunucunuzu uygun ön kontrol yanıtlarını gönderecek şekilde yapılandırmayı deneyin. Bu, Access-Control-Allow-Methodsve gibi ek başlıklar şeklinde olacaktır Access-Control-Allow-Headers.

2) dataType: jsonAyarı bırakın . JQuery talep etmelidir Content-Type: application/x-www-form-urlencodedvarsayılan olarak, ama sadece emin olmak için, o kadar değiştirebileceğiniz dataType: jsonilecontentType: 'application/x-www-form-urlencoded'

Js'de "parametreler" gönderiyorsunuz: request.send(params);

ancak jquery'de "veri". Veri tanımlı mı ?: data:data,

Ayrıca, URL'de bir hata var:

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

Sözdizimini $ .post için olanla karıştırıyorsunuz

Güncelleme : Monsur cevabına göre dolaşıyordum ve eklemeniz gerektiğini buldum Access-Control-Allow-Headers: Content-Type(aşağıda tam paragraf var)

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

CORS Nasıl Çalışır?

CORS, Flash'ın crossdomain.xml dosyasına çok benzer şekilde çalışır. Temel olarak, tarayıcı bir hizmete etki alanları arası bir istek göndererek Origin HTTP başlığını istekte bulunan sunucuya ayarlar. Hizmet, böyle bir isteğe izin verilip verilmediğini belirtmek için Access-Control-Allow-Origin gibi birkaç başlık içerir.

BOSH bağlantı yöneticileri için Access-Control-Allow-Origin değerini * olarak ayarlayarak tüm kaynaklara izin verildiğini belirtmek yeterlidir. Content-Type üstbilgisi, Access-Control-Allow-Headers üstbilgisinde de beyaz listeye alınmalıdır.

Son olarak, BOSH bağlantı yöneticisi istekleri de dahil olmak üzere belirli türdeki istekler için izin kontrolü önceden yayınlanır. Tarayıcı bir OPTIONS isteğinde bulunacak ve hangi kaynaklara izin verildiğini, hangi yöntemlere izin verildiğini ve bu yetkilendirmenin ne kadar süreceğini gösteren bazı HTTP başlıklarını geri almayı bekler. Örneğin, OPTIONS için yaptığım Pencap ve ejabberd yamaları:

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

Cors, istek yöntemini tamamlanmadan önce POST'tan OPTIONS'a değiştirir, böylece gönderi verileriniz gönderilmez. Bu cors sorununu halletmenin yolu, OPTIONS yöntemini desteklemeyen ajax ile isteği gerçekleştirmektir. örnek kod:

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

c # sunucusunda şu başlıklarla:

                    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", "*");

Jquery'nizi aşağıdaki şekilde değiştirin:

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