Żądanie Cors POST działa ze zwykłego javascript, ale dlaczego nie z jQuery?

Próbuję złożyć żądanie Cross Origin post, i mam go działającego w prostym Javascript tak: 

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

Ale chciałbym użyć jQuery, ale nie mogę go uruchomić. To właśnie próbuję: 

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

To skutkuje porażką. Jeśli ktoś wie, dlaczego jQuery nie działa, proszę dać nam znać. Dzięki.

W przeciwieństwie do poprzednich wersji, Firefox 4.0 i jQuery 1.5.1 nie są dostępne w wersji 1.5.1, a mój serwer odpowiada odpowiednim nagłówkiem Access-Control-Allow-Origin.]}
Author: mateusmaso, 2011-04-07
Source

3 answers

UPDATE: jak zauważył TimK, nie jest to już potrzebne w jquery 1.5.2. Ale jeśli chcesz dodać niestandardowe nagłówki lub zezwolić na użycie poświadczeń (nazwa użytkownika, hasło lub pliki cookie itp.), Czytaj dalej.

Myślę, że znalazłem odpowiedź! (4 godziny i dużo przekleństw później) 

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

Musisz ręcznie określić wszystkie nagłówki, które będziesz akceptował (przynajmniej tak było w moim przypadku w FF 4.0 & Chrome 10.0.648.204).

JQuery ' s $.metoda ajax wysyła " x-requested-with" nagłówek dla wszystkich żądań cross domain (myślę, że tylko cross domain).

Więc brakujący nagłówek potrzebny do odpowiedzi na żądanie opcji to: 

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

Jeśli przekazujesz jakieś Nie "proste" nagłówki, musisz umieścić je na swojej liście (wysyłam jeszcze jeden): 

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

Więc poskładać to wszystko do kupy, oto moje 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
Author: Will Mason,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-04-21 00:48:54

Inną możliwością jest to, że ustawienie dataType: json powoduje, że jQuery wysyła nagłówek Content-Type: application/json. Jest to uważane za niestandardowy nagłówek przez CORS i wymaga żądania wstępnego inspekcji CORS. Więc kilka rzeczy do wypróbowania:

1) spróbuj skonfigurować serwer tak, aby wysyłał odpowiednie odpowiedzi. Będzie to miało formę dodatkowych nagłówków, takich jak Access-Control-Allow-Methods i Access-Control-Allow-Headers.

2) upuść ustawienie dataType: json. JQuery powinien domyślnie żądać Content-Type: application/x-www-form-urlencoded, ale dla pewności możesz zastąpić {[0] } contentType: 'application/x-www-form-urlencoded'

 16
Author: monsur,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-04-08 01:33:14

Wysyłasz "params" w js: request.send(params);

Ale "dane" w jquery". Czy dane są zdefiniowane?: data:data,

Również masz błąd w adresie URL: 

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

Mieszasz składnię z tą za $.post

Update : Szukałem w googlach na podstawie odpowiedzi monsur i stwierdziłem, że trzeba dodać Access-Control-Allow-Headers: Content-Type (poniżej pełny akapit)

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

Jak działa CORS]} CORS działa bardzo podobnie do Flasha crossdomain.plik xml. Zasadniczo, przeglądarka wyśle między domenami żądanie do serwisu, ustawienie HTTP pochodzenie nagłówka do żądającego serwer. Usługa obejmuje kilka nagłówki jak Access-Control-Allow-Origin to wskazać, czy taki wniosek jest dozwolone.

Dla menedżerów połączeń BOSH, it wystarczy sprecyzować, że wszystkie początki są dozwolone, ustawiając wartość Access-Control-Allow-Origin to*. Na Nagłówek Content-Type musi być również białe-wymienione w Nagłówek Access-Control-Allow-Headers.

Wreszcie, dla niektórych rodzajów żądania, w tym połączenie BOSH żądania menedżera, uprawnienia czek będzie wcześniej wystawiony. Na przeglądarka wykona żądanie opcji i spodziewaj się odzyskać nagłówki HTTP które wskazują, jakie pochodzenie są dozwolone, jakie metody są dozwolone, i jak długo to upoważnienie będzie ostatni. Na przykład, oto, co Plastry Punjab i ejabberd zrobiłem return for OPTIONS: 

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-Type 
Access-Control-Max-Age: 86400
 8
Author: Aleadam,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-04-09 17:03:01