W poniższym kodzie $http
metoda AngularJS wywołuje adres URL i przesyła obiekt xsrf jako „Żądanie ładunku” (zgodnie z opisem na karcie sieciowej debugera Chrome). Metoda jQuery $.ajax
wykonuje to samo wywołanie, ale przekazuje xsrf jako „Dane formularza”.
Jak zmusić AngularJS do przesłania xsrf jako danych formularza zamiast ładunku żądania?
var url = 'http://somewhere.com/';
var xsrf = {fkey: 'xsrf key'};
$http({
method: 'POST',
url: url,
data: xsrf
}).success(function () {});
$.ajax({
type: 'POST',
url: url,
data: xsrf,
dataType: 'json',
success: function() {}
});
ajax
angularjs
post
angular-http
Mjibson
źródło
źródło
Odpowiedzi:
Do przekazywanego obiektu $ http należy dodać następujący wiersz:
Przekazywane dane należy przekonwertować na ciąg zakodowany w adresie URL:
Masz więc coś takiego:
Od: https://groups.google.com/forum/#!msg/angular/5nAedJ1LyO0/4Vj_72EZcDsJ
AKTUALIZACJA
Aby skorzystać z nowych usług dodanych do AngularJS 1.4, patrz
źródło
var xsrf = $.param({fkey: "key"});
To głupie, dlaczego kątowe nie może tego zrobić wewnętrznie?headers: {Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}
Jeśli nie chcesz używać jQuery w rozwiązaniu, możesz spróbować. Rozwiązanie pobrane stąd https://stackoverflow.com/a/1714899/1784301
źródło
for
trochę zmienić instrukcję, aby użyćangular.forEach
zamiast niej.obj[p]
to nie jest zerowe ani niezdefiniowane . W przeciwnym razie zostanie wysłany ciąg „null” lub „undefined” jako wartość.transformRequest: function(obj)
Ponieważ obiekt jest niezdefiniowany, czy przypuszczamy, że przekażemy xsrf? JaktransformRequest: function(xsrf)
Ciągłe zamieszanie wokół tego problemu zainspirowało mnie do napisania postu na ten temat na blogu. Rozwiązanie, które proponuję w tym poście, jest lepsze niż twoje obecne najwyżej ocenione rozwiązanie, ponieważ nie ogranicza cię do parametryzacji obiektu danych dla wezwań serwisowych $ http; tzn. z moim rozwiązaniem możesz po prostu kontynuować przekazywanie rzeczywistych obiektów danych do $ http.post () itp. i nadal osiągać pożądany wynik.
Również najwyżej oceniana odpowiedź polega na uwzględnieniu na stronie pełnego jQuery dla funkcji $ .param (), podczas gdy moje rozwiązanie jest agnostyczne dla jQuery, czysty AngularJS.
http://victorblog.com/2012/12/20/make-angularjs-http-service-behave-like-jquery-ajax/
Mam nadzieję że to pomoże.
źródło
ASP.NET
„natywnie” tego nie obsługuje. Jeśli nie chcesz zmieniać zachowania AngularJS (czego nie zrobiłem, ponieważ mój interfejs API zwraca JSON, dlaczego nie akceptuje też JSON, jest bardziej elastyczny niż dane formularza), możesz czytać z niegoRequest.InputStream
i obsługiwać go w dowolny sposób chcesz tego. (Zdecydowałem się na deserializację wdynamic
celu ułatwienia użycia.)Wziąłem kilka innych odpowiedzi i zrobiłem coś nieco czystszego, umieść to
.config()
wywołanie na końcu swojego angular.module w pliku app.js:źródło
unshift()
aby pozostałe transformacje pozostały niezakłócone. Dobra robota.Od wersji AngularJS 1.4.0 istnieje wbudowana
$httpParamSerializer
usługa, która konwertuje dowolny obiekt na część żądania HTTP zgodnie z regułami wymienionymi na stronie dokumentacji .Można go użyć w następujący sposób:
Pamiętaj, że dla poprawnego formularza post
Content-Type
nagłówek musi zostać zmieniony. Aby to zrobić globalnie dla wszystkich żądań POST, można użyć tego kodu (wziętego z pół-odpowiedzi Albireo):Aby to zrobić tylko dla bieżącego postu,
headers
należy zmodyfikować właściwość obiektu żądania:źródło
transformRequest: $httpParamSerializer, data: formDataObj
. Dzięki za rozwiązanie.Możesz zdefiniować zachowanie globalnie:
Nie musisz za każdym razem zmieniać tego na nowo:
źródło
Aby obejść ten problem, kod odbierający test POST powinien odpowiadać na dane aplikacji / json. Do PHP dodałem poniższy kod, pozwalając mi na POST w postaci zakodowanej w formacie JSON.
źródło
Te odpowiedzi wyglądają jak szalone przesady, czasem proste jest po prostu lepsze:
źródło
Content-Type
i ustawić go naapplication/x-www-form-urlencoded
.Możesz wypróbować poniższe rozwiązanie
źródło
Utwórz usługę adaptera dla posta:
Użyj go w swoich kontrolerach lub cokolwiek innego:
źródło
Jest naprawdę fajny samouczek, który omawia tę i inne powiązane rzeczy - Przesyłanie formularzy AJAX: The AngularJS Way .
Zasadniczo musisz ustawić nagłówek żądania POST, aby wskazać, że wysyłasz dane formularza jako ciąg znaków zakodowany w adresie URL, i ustawić dane do wysłania w tym samym formacie
Zauważ, że funkcja pomocnicza param () jQuery służy tutaj do szeregowania danych w ciąg, ale możesz to zrobić ręcznie, jeśli nie używasz jQuery.
źródło
$.param
Zrobić magię. idealne rozwiązanie dla osób, które mają aplikację opartą na jQuery + AngularJS.Proszę się wymeldować! https://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs
źródło
Dla użytkowników Symfony2:
Jeśli nie chcesz nic zmieniać w swoim javascript, aby to działało, możesz wprowadzić te zmiany w aplikacji Symfony:
Utwórz klasę rozszerzającą klasę Symfony \ Component \ HttpFoundation \ Request:
Teraz użyj swojej klasy w app_dev.php (lub dowolnym używanym pliku indeksu)
źródło
Wystarczy ustawić Content-Type nie wystarczy, adres URL koduje dane formularza przed wysłaniem.
$http.post(url, jQuery.param(data))
źródło
Obecnie używam następującego rozwiązania, które znalazłem w grupie google AngularJS.
Zauważ, że jeśli używasz PHP, musisz użyć czegoś takiego jak komponent HTTP Symfony 2,
Request::createFromGlobals()
aby to przeczytać, ponieważ $ _POST nie zostanie automatycznie załadowany z nim.źródło
AngularJS robi to dobrze, ponieważ wykonuje następujący typ zawartości w nagłówku żądania http:
Jeśli idziesz z php jak ja, a nawet z Symfony2, możesz po prostu rozszerzyć kompatybilność serwera dla standardu json, jak opisano tutaj: http://silex.sensiolabs.org/doc/cookbook/json_request_body.html
Sposób Symfony2 (np. W twoim DefaultController):
Zaletą byłoby to, że nie musisz używać parametru jQuery i możesz używać AngularJS w jego natywnym sposobie wykonywania takich żądań.
źródło
Pełna odpowiedź (od kątowej 1.4). Musisz dołączyć zależność $ httpParamSerializer
źródło
W konfiguracji aplikacji -
Z prośbą o zasoby -
źródło
To nie jest bezpośrednia odpowiedź, ale raczej nieco inny kierunek projektowania:
Nie publikuj danych jako formularza, ale jako obiekt JSON, który ma być bezpośrednio odwzorowany na obiekt po stronie serwera, lub użyj zmiennej ścieżki stylu REST
Teraz wiem, że żadna opcja może nie być odpowiednia w twoim przypadku, ponieważ próbujesz przekazać klucz XSRF. Odwzorowanie go na taką zmienną ścieżkową jest okropnym projektem:
Ponieważ z natury chcesz przekazać klucz xsrf również na inną ścieżkę,
/login
,/book-appointment
itd. I nie chcesz, aby Twój dość bałaganu URLCo ciekawe, dodanie go jako pola obiektowego również nie jest właściwe, ponieważ teraz do każdego obiektu json przekazywanego do serwera należy dodać pole
Na pewno nie chcesz dodawać innego pola do klasy po stronie serwera, która nie ma bezpośredniego powiązania semantycznego z obiektem domeny.
Moim zdaniem najlepszym sposobem na przekazanie klucza xsrf jest nagłówek HTTP. Obsługuje to wiele bibliotek frameworku WWW po stronie serwera ochrony xsrf. Na przykład w Java Spring można przekazać go za pomocą
X-CSRF-TOKEN
nagłówka .Doskonała zdolność Angulara do wiązania obiektu JS z obiektem interfejsu użytkownika oznacza, że możemy pozbyć się praktyki wysyłania formularza razem i zamiast tego publikować JSON. JSON można łatwo przekształcić do postaci szeregowej w obiekt po stronie serwera i obsługiwać złożone struktury danych, takie jak mapa, tablice, obiekty zagnieżdżone itp.
Jak zamieszczasz tablicę w formularzu? Może tak:
albo to:
Oba są kiepskie.
źródło
To właśnie robię dla moich potrzeb, gdzie muszę wysłać dane logowania do interfejsu API jako dane formularza, a obiekt JavaScript (userData) jest automatycznie konwertowany na dane zakodowane w adresie URL
Tak wyglądają moje dane użytkownika
źródło
Jedyne, co musisz zmienić, to użyć właściwości „params” zamiast „data” podczas tworzenia obiektu $ http:
W powyższym przykładzie klienci [i] to po prostu obiekt JSON (w żaden sposób nie szeregowany). Jeśli użyjesz „params” zamiast „data”, kątowy serializuje obiekt za Ciebie za pomocą $ httpParamSerializer: https://docs.angularjs.org/api/ng/service/ $ httpParamSerializer
źródło
Użyj
$http
usługi AngularJS i użyj jejpost
metody lub$http
funkcji konfiguracji .źródło