Próbuję wysłać prośbę o przesyłkę pocztową Cross Origin i działam w JavaScript
następujący sposób:
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ę zmusić go do pracy. Oto, czego 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");}
});
Skutkuje to niepowodzeniem. Jeśli ktoś wie, dlaczego jQuery
nie działa, daj nam znać. Dzięki.
(Używam wersji jQuery
1.5.1 i Firefox 4.0, a mój serwer odpowiada odpowiednim Access-Control-Allow-Origin
nagłówkiem)
javascript
jquery
xmlhttprequest
cors
Magmowy
źródło
źródło
Odpowiedzi:
AKTUALIZACJA: 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 zaakceptujesz (przynajmniej tak było w przypadku mnie w FF 4.0 i Chrome 10.0.648.204).
Metoda $ .ajax jQuery wysyła nagłówek „x-request-with” dla wszystkich żądań międzydomenowych (myślę, że jest to jedyna międzydomenowa).
Tak więc brakujący nagłówek potrzebny do odpowiedzi na żądanie OPTIONS 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 je uwzględnić na 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
Podsumowując, 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); }
źródło
Inną możliwością jest to, że ustawienie
dataType: json
powoduje, że JQuery wysyłaContent-Type: application/json
nagłówek. Jest to uważane za niestandardowy nagłówek przez CORS i wymaga żądania wstępnego CORS. Więc kilka rzeczy do wypróbowania:1) Spróbuj skonfigurować serwer, aby wysyłał prawidłowe odpowiedzi dotyczące inspekcji wstępnej. Będzie to miało postać dodatkowych nagłówków, takich jak
Access-Control-Allow-Methods
iAccess-Control-Allow-Headers
.2) Upuść
dataType: json
ustawienie. JQuery powinien zażądaćContent-Type: application/x-www-form-urlencoded
domyślnie, ale po prostu mieć pewność, można zastąpićdataType: json
zcontentType: 'application/x-www-form-urlencoded'
źródło
application/x-www-form-urlencoded
równetext/plain
. Spróbowałem dodać nagłówek odpowiedziAccess-Control-Allow-Methods "POST, GET, OPTIONS"
Nic nie działało.dataType
wpływa naAccept
nagłówek żądania, ale nie naContent-Type
nagłówek żądania.Wysyłasz „parametry” w js:
request.send(params);
ale „dane” w jquery ”. Czy dane są zdefiniowane ?:
data:data,
Masz również 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");} });
Miksujesz składnię ze składnią $ .post
Aktualizacja : szukałem w Google na podstawie odpowiedzi monsur i stwierdziłem, że musisz dodać
Access-Control-Allow-Headers: Content-Type
(poniżej jest pełny akapit)http://metajack.im/2010/01/19/crossdomain-ajax-for-xmpp-http-binding-made-easy/
źródło
var data = {action:"something"}
jQuery.ajaxSetup({'beforeSend': function(xhr) {xhr.setRequestHeader(string, string)}})
i grania z różnymi wysłanymi nagłówkami (przykład dla rails tutaj: railscasts.com/episodes/136-jquery )Cors zmieniają metodę żądania, zanim to zrobisz, z POST na OPCJE, więc Twoje dane pocztowe nie zostaną wysłane. Sposób, w jaki działał, aby rozwiązać ten problem z procesorami, to wykonanie żądania za pomocą ajax, które nie obsługuje metody OPTIONS. przykładowy 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); } });
z tymi nagłówkami na serwerze 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", "*");
źródło
Zmodyfikuj swoje Jquery w następujący sposób:
$.ajax({ url: someurl, contentType: 'application/json', data: JSONObject, headers: { 'Access-Control-Allow-Origin': '*' }, //add this line dataType: 'json', type: 'POST', success: function (Data) {....} });
źródło
contentType: 'application/json', data: JSONObject,
- Serwer nie oczekuje JSON, więc wysyłanie JSON nie miałoby sensu. Również nie ma czegoś takiego jak obiekt JSON .headers: { 'Access-Control-Allow-Origin': '*' }, //add this line
- Nigdy tego nie rób.Access-Control-Allow-Origin
jest nagłówkiem odpowiedzi , a nie nagłówkiem żądania. W najlepszym przypadku nic to nie da. W najgorszym przypadku przekształci żądanie z prostego żądania na wstępnie sprawdzone żądanie, co sprawia, że staje się trudniejsze do obsłużenia na serwerze.