Запрос CORS POST работает с простым javascript, но почему бы не с jQuery?

Я пытаюсь сделать запрос Cross Origin post, и я получил его работу в обычном 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 не работает, пожалуйста, дайте нам всем знать. Спасибо.

(Я использую jQuery 1.5.1 и Firefox 4.0, и мой сервер отвечает с правильным заголовком Access-Control-Allow-Origin)

3 74
javascript jquery cors xmlhttprequest

3 ответа:

UPDATE: как отметил Тимк, это больше не нужно с jquery 1.5.2. Но если вы хотите добавить пользовательские заголовки или разрешить использование учетных данных (имя пользователя, пароль или файлы cookie и т. д.), Читайте дальше.

Я думаю, что нашел ответ! (4 часа и много ругани позже)

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

вам нужно вручную указать все заголовки, которые вы примете (по крайней мере, это было для меня в FF 4.0 & Chrome 10.0.648.204).

jQuery $.ajax метод отправляет на "X-просил-с заголовка" для всех крест просит домен (я думаю его только крест домена).

таким образом, отсутствующий заголовок, необходимый для ответа на запрос опций:

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

другая возможность заключается в том, что параметр 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'

16

вы посылаете "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");}
});

вы смешиваете синтаксис с одним за $.пост

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

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

как работает CORS

CORS работает очень похоже на Flash кроссдомен.XML-файл. В основном, браузер отправит кросс-домен запрос к службе, установка HTTP заголовок происхождения запрашивающему сервер. Услуга включает в себя несколько заголовки, как Доступ-контроля-разрешить-происхождение укажите, есть ли такой запрос есть допустимый.

для менеджеров соединений BOSH, это достаточно указать, что все истоки разрешены, установив значение Контроля доступа-разрешить-происхождения *. Этот Заголовок типа контента также должен быть белый список в Заголовок Access-Control-Allow-Headers.

наконец, для некоторых видов запросы, в том числе Бош подключение менеджер запросов, разрешений проверка будет предварительно проведена. Этот браузер сделает запрос параметров и планируете верните некоторые заголовки HTTP это указывает на то, какие истоки разрешено, какие методы разрешены, и как долго это разрешение будет последний. Например, вот что Пенджаб и патчи сервере ejabberd я сделал возврат для опций:

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