Запит CORS POST працює з простого JavaScript, але чому б не з jQuery?

Question 1

Я намагаюся зробити запит на публікацію Cross Origin, і я змусив його працювати JavaScriptтак:

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

Але я хотів би використовувати jQuery, але я не можу змусити його працювати. Це те, що я намагаюся:

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

Це призводить до Помилки. Якщо хтось знає, чому jQueryце не працює, будь ласка, повідомте нам усіх. Дякую.

(Я використовую jQuery1.5.1 та Firefox 4.0, і мій сервер відповідає належним Access-Control-Allow-Originзаголовком)

Question 2

ОНОВЛЕННЯ: Як зазначив TimK, це більше не потрібно з jquery 1.5.2. Але якщо ви хочете додати власні заголовки або дозволити використання облікових даних (ім’я користувача, пароль або файли cookie тощо), читайте далі.

Здається, я знайшов відповідь! (4 години і багато лайки пізніше)

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

Вам потрібно вручну вказати всі заголовки, які ви приймаєте (принаймні, це було для мене у FF 4.0 та Chrome 10.0.648.204).

Метод $ .ajax jQuery надсилає заголовок "x-request-with" для всіх міждоменних запитів (я думаю, що це єдиний міждомен).

Отже, відсутній заголовок, необхідний для відповіді на запит OPTIONS:

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

Якщо ви передаєте будь-які не "прості" заголовки, вам потрібно буде включити їх у свій список (я надсилаю ще один):

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

Отже, щоб скласти все це, ось мій 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);
}

Question 3

Інша можливість полягає в тому, що налаштування dataType: jsonзмушує JQuery відправляти Content-Type: application/jsonзаголовок. Це вважається CORS нестандартним заголовком і вимагає попереднього запиту CORS. Ось кілька речей, які потрібно спробувати:

1) Спробуйте налаштувати свій сервер для надсилання належних попередніх відповідей. Це буде у формі додаткових заголовків, як Access-Control-Allow-Methodsі Access-Control-Allow-Headers.

2) Відкиньте dataType: jsonналаштування. JQuery повинен запитувати Content-Type: application/x-www-form-urlencodedза замовчуванням, але для впевненості ви можете замінити dataType: jsonнаcontentType: 'application/x-www-form-urlencoded'

Question 4

Ви надсилаєте "params" у js: request.send(params);

але "дані" у jquery ". Чи визначено дані ?: data:data,

Крім того, у вас є помилка в URL-адресі:

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

Ви змішуєте синтаксис із таким для $ .post

Оновлення : Я гуглив на основі відповіді монсура, і виявив, що вам потрібно додати Access-Control-Allow-Headers: Content-Type(нижче - повний абзац)

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

Як працює CORS

CORS працює дуже подібно до файлу crossdomain.xml Flash. В основному браузер надсилає міждоменний запит службі, встановлюючи HTTP-заголовок Origin на сервер, що запитує. Послуга включає кілька заголовків, таких як Access-Control-Allow-Origin, щоб вказати, чи дозволено такий запит.

Для менеджерів з’єднань BOSH достатньо вказати, що дозволено всі джерела, встановивши значення Access-Control-Allow-Origin на *. Заголовок Content-Type також повинен бути в білому списку в заголовку Access-Control-Allow-Headers.

Нарешті, для певних типів запитів, включаючи запити менеджера з’єднань BOSH, перевірка дозволів буде попередньо перевірена. Браузер зробить запит OPTIONS і очікує повернення деяких заголовків HTTP, які вказують, які джерела дозволено, які методи дозволено і як довго триватиме ця авторизація. Наприклад, ось те, що патчі для Пенджабу та ejabberd я повернув для ВАРІАНТІВ:
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-Type 
Access-Control-Max-Age: 86400

Question 5

Корди змінюють метод запиту до того, як це буде зроблено, з POST на OPTIONS, отже, дані вашого повідомлення не будуть надіслані. Спосіб роботи з цією проблемою cors - це виконання запиту за допомогою ajax, який не підтримує метод OPTIONS. приклад коду:

        $.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 #:

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

Question 6

Змініть свій Jquery наступним чином:

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