Yêu cầu CORS POST hoạt động từ JavaScript thuần túy, nhưng tại sao lại không với jQuery?

Tôi đang cố gắng thực hiện một yêu cầu bài đăng Cross Origin và tôi đã làm cho nó hoạt động đơn giản JavaScriptnhư sau:

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

Nhưng tôi muốn sử dụng jQuery, nhưng tôi không thể làm cho nó hoạt động. Đây là những gì tôi đang cố gắng:

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

Điều này dẫn đến Thất bại. Nếu ai biết tại sao jQuerykhông hoạt động, xin vui lòng cho chúng tôi biết. Cảm ơn.

(Tôi đang sử dụng jQuery1.5.1 và Firefox 4.0 và máy chủ của tôi đang phản hồi với Access-Control-Allow-Origintiêu đề phù hợp )

CẬP NHẬT: Như TimK đã chỉ ra, điều này không cần thiết với jquery 1.5.2 nữa. Nhưng nếu bạn muốn thêm tiêu đề tùy chỉnh hoặc cho phép sử dụng thông tin xác thực (tên người dùng, mật khẩu hoặc cookie, v.v.), hãy đọc tiếp.

Tôi nghĩ rằng tôi đã tìm thấy câu trả lời! (4 giờ và rất nhiều lời nguyền rủa sau đó)

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

Bạn cần chỉ định thủ công tất cả các tiêu đề mà bạn sẽ chấp nhận (ít nhất đó là trường hợp của tôi trong FF 4.0 & Chrome 10.0.648.204).

Phương thức $ .ajax của jQuery gửi tiêu đề "x-request-with" cho tất cả các yêu cầu tên miền chéo (tôi nghĩ tên miền chéo duy nhất của nó).

Vì vậy, tiêu đề bị thiếu cần thiết để phản hồi yêu cầu OPTIONS là:

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

Nếu bạn đang chuyển bất kỳ tiêu đề nào không "đơn giản", bạn sẽ cần đưa chúng vào danh sách của mình (tôi gửi thêm một tiêu đề nữa):

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

Vì vậy, để tổng hợp tất cả lại với nhau, đây là PHP của tôi:

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

Một khả năng khác là cài đặt dataType: jsonkhiến JQuery gửi Content-Type: application/jsontiêu đề. Đây được coi là tiêu đề không chuẩn của CORS và yêu cầu yêu cầu khởi động trước CORS. Vì vậy, một số điều cần thử:

1) Thử định cấu hình máy chủ của bạn để gửi các phản hồi thích hợp trước khi bay. Điều này sẽ ở dạng các tiêu đề bổ sung như Access-Control-Allow-Methodsvà Access-Control-Allow-Headers.

2) Bỏ dataType: jsoncài đặt. JQuery nên yêu cầu Content-Type: application/x-www-form-urlencodedtheo mặc định, nhưng để chắc chắn, bạn có thể thay thế dataType: jsonbằngcontentType: 'application/x-www-form-urlencoded'

Bạn đang gửi "params" bằng js: request.send(params);

nhưng "dữ liệu" trong jquery ". Dữ liệu có được định nghĩa không ?: data:data,

Ngoài ra, bạn gặp lỗi trong URL:

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

Bạn đang trộn cú pháp với cú pháp cho $ .post

Cập nhật : Tôi đã tìm kiếm xung quanh dựa trên câu trả lời của ông và tôi thấy rằng bạn cần bổ sung Access-Control-Allow-Headers: Content-Type(bên dưới là đoạn văn đầy đủ)

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

Cách hoạt động của CORS

CORS hoạt động rất giống với tệp crossdomain.xml của Flash. Về cơ bản, trình duyệt sẽ gửi một yêu cầu tên miền chéo đến một dịch vụ, đặt tiêu đề HTTP Origin cho máy chủ yêu cầu. Dịch vụ bao gồm một số tiêu đề như Access-Control-Allow-Origin để cho biết liệu một yêu cầu như vậy có được phép hay không.

Đối với trình quản lý kết nối BOSH, chỉ cần cho phép tất cả nguồn gốc là đủ, bằng cách đặt giá trị của Access-Control-Allow-Origin thành *. Tiêu đề Loại-Nội dung cũng phải được liệt kê trong danh sách trắng trong tiêu đề Access-Control-Allow-Headers.

Cuối cùng, đối với một số loại yêu cầu, bao gồm cả yêu cầu trình quản lý kết nối BOSH, việc kiểm tra quyền sẽ được thực hiện trước. Trình duyệt sẽ thực hiện yêu cầu TÙY CHỌN và mong đợi nhận lại một số tiêu đề HTTP cho biết nguồn gốc nào được phép, phương thức nào được phép và thời hạn ủy quyền này. Ví dụ: đây là những gì các bản vá Punjab và ejabberd tôi đã trả lại cho TÙY CHỌN:

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

Cors thay đổi phương thức yêu cầu trước khi hoàn tất, từ POST thành OPTIONS, do đó, dữ liệu bài đăng của bạn sẽ không được gửi. Cách hoạt động để xử lý vấn đề cors này là thực hiện yêu cầu với ajax, không hỗ trợ phương pháp OPTIONS. mã ví dụ:

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

với tiêu đề này trên máy chủ c #:

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

Sửa đổi Jquery của bạn theo cách sau:

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