:sparkles: PWA :sparkles:
Twarz autora bloga

Piotr Kowalski

Organizator WarsawJS Trener YouTuber

Jak usunąć zapytanie HTTP OPTIONS?

Ahoy! Od jakiegoś czasu artykuły pojawiają się rzadziej. Znalazłem tego przyczynę!

Pisząc artykuł zawsze staram się opisać wszystko co wiem na dany temat. Tym samym czas jaki muszę wygospodarować na taki artykuł wykracza poza moje możliwości. Szkoda.

Rozwiązanie jest proste. Będę publikował częściej, ale kosztem długości artykułu. Po prostu będą krótkie. Jestem ciekaw, czy ta forma przypadnie Wam do gustu.

Baner reklamujący artykuł

Problem

Piszę aplikację, która będzie hostowana na adresie foo.com. Aplikacja komunikuje się z backend-em, który jest dostępny pod adresem bar.com.

Kto nie wie co to jest CORS, to zapraszam tutaj.

Podczas komunikacji z backend-em za pomocą zapytania HTTP typu GET albo POST, przed faktycznym zapytaniem, wysyłany jest automatycznie (inicjowany przez przeglądarkę) request typu OPTIONS.

Chciałbym go wyeliminować, aby w DevTools → Network nie widzieć zdublowanych rekordów.

Jak to osiągnąć?

Rozwiązanie

Jeśli w zapytaniu znajdują się nagłówki, które przeglądarka nie rozumie (np. są to customowe nagłówki, które rozumie tylko serwer bar.com), to takie zapytanie zostaje uznane za zapytanie z efektami ubocznymi i musi zostać SPRAWDZONE przez przeglądarkę, czy serwer poradzi sobie z jego obsługą.

Zapytanie HTTP OPTIONS jest po to, aby przeglądarka zweryfikowała serwer.

Aby wyeliminować zapytanie HTTP OPTIONS musisz spełnić następujące warunki:

  • Nie używać customowych nagłówków, np. X-USERNAME: root
  • Ustawić nagłówek Content-Type na jeden z następujących:
    • multipart/form-data
    • application/x-www-form-urlencoded
    • plain/text

W moim przypadku pomogło ustawienie Content-Type: text/plain :wink:

Przeglądarka domyślnie ustawiała nagłówek na application/json.


Więcej informacji na MDN.