Błąd Cross-origin i nagłówek Access-Control-Allow-Origin – royalcode.eu

Błąd Cross-origin (CORS) i nagłówek Access-Control-Allow-Origin

Jeśli poniższy błąd w konsoli wywołuje w Tobie poczucie irytacji, to pewnie przyda Ci się rozwiązanie. To sprawa, która często zniechęcała mnie do użycia API. Nie wiedziałem dlaczego. Czytałem dokumentację i nie rozumiałem. W końcu jednak dotarło do mnie dlaczego moje API nie działa i raz na zawsze pożegnałem problem. 🙂
Cross Origin Policy Error Błąd API CORS

Cross-origin Error to nie wina Twojego kodu

Jeżeli stawiasz sobie pytanie „co robię źle”, to natychmiast przestań. Wszystko robisz dobrze, tylko działasz prawdopodobnie na localhost z inyym portem, hostem lub bez SSL, więc Twój protokół nie pokrywa się z protokołem źródłowym API, co może być wymagane. Zobacz, to jest mój kod:

CORS błąd API error cross-origin policy

Nie wygląda, żeby cokolwiek było tutaj źle, prawda? To jest komponent aplikacji pisanej w React. Axios bardzo ułatwia sprawę pobierania danych z API. Aplikacja działałaby poprawnie, gdyby API chciało współpracować. Oto, jaki mamy błąd:

Zablokowano żądanie do zasobu innego pochodzenia: zasady „Same Origin Policy” nie pozwalają wczytywać zdalnych zasobów z „https://sandbox.naturessunshine.com/us/api/getItems” (brakujący nagłówek CORS „Access-Control-Allow-Origin”).

Oczywiście po przeczytaniu błędu zmodyfikowałem kod dodając nagłówek do zapytania, jednak nic to nie dało. Dzieje się tak dlatego, że brakujący nagłówek CORS „Access-Control-Allow-Origin” ma być w odpowiedzi serwera, a nie w Twoim zapytaniu. A więc API działa poprawnie i Twój kod też jest poprawny. Problem będzie nierozwiązany tak długo, jak nie dopasujesz swojego protokołu, hosta lub portu (może wszystkich tych rzeczy). Pozostaje też możliwość zmiany proxy, ale zostawiłbym to sobie na wypadek, gdyby kłopot wystąpił jednak na produkcji. Nie jest to skomplikowany temat i wkrótce napiszę i o nim. Zmiana proxy pomoże na wersji developerskiej i produkcyjnej. Teraz jednak chcemy ruszyć dalej z projektem, więc szybko przejdźmy do rozwiązania.

Natychmiastowe rozwiązanie – jak obejść problem Cross-origin Error, aby budować aplikację lokalnie z API

Nie wysilaj się na wyszukanie sposobu do wygenerowania certyfikatu SSL do swojego lokalhosta. Nie testuj też aplikacji, wrzucając ją co chwilę na serwer lub na github. Jest dużo szybszy, sprawdzony sposób, którym jest wtyczka do przeglądarki.

Podane wtyczki zezwalają na użycie CORS, ponieważ dodają nagłówek do odpowiedzi na wysłane zapytanie. Dla bezpieczeństwa polecam mieć je wyłączone i używać wyłącznie podczas tworzenia projektu.

Jeśli chcesz zgłębić problem błędu, to przejdź do dokumentacji React na temat błędów Cross-origin.