pobranie danych z API nie działa przez "has been blocked by CORS policy: No 'Access-Control-Allow-Origin' "

0

Witam

Tworze aplikacje internetową z react.js jak frontem i spring boot jako backendem. Przy próbie fetch-owania danych z API dostaje taki o to komunikat.
Chrome: screenshot-20220420223624.png
Mozilla: screenshot-20220420223708.png

Mój fetch w reacie: screenshot-20220420223740.png
A o to jak próbowałem rozwiązać swoje problemy:

  1. Dodawałem w moim userControler nagłówek : @CrossOrigin(origins = "http://localhost:3000") (gdzie localhost:3000 to react)
  2. Dodałem jako argument w fetch(url, {mode: 'no-cors'}), wtedy błąd z CORS zniknął ale pojawiły się następujące:
    W mozilla: screenshot-20220420225209.png
    W chromie: screenshot-20220420225241.png
    Gdzie linijka App.js linia 21 to właśnie ten fetch po dodaniu "mode: 'co-cors".

A tu mamy JSON który ma być pobrany przez React:
screenshot-20220420225500.png
Raw data responsa:
screenshot-20220420233714.png

0

W jakim celu robisz

json['results']
0

A więc co zrobiłem ostatnio:

  • okazało się że dawałem @CrossOrigin(origins = "http://localhost:3000") w złym kontrolerze, po dodaniu tej linijki we właściwym miejscu problem z CORS zniknął jednak dalej dane nie są wyświetlane (pomimo że ani w firefox ani w chrome nie wywala błędu)
    Tutaj screen z wypisania consol.logiem "response.json()" (w Firefox), wygląda jakby pobierało prawidłowo dane do response.json()
    screenshot-20220421233617.png
    To samo w Chrome:
    screenshot-20220422000045.png
    A czym jest to json['result'] to miało być wyciągnięcie z response.json arraya z danymi ale jak tak patrze teraz to się pogubiłem bardzo, i w sumie nie mam pojecia co wpisac zamiast tego json['result'].

Ogólnie wychodzi na to chyba że response.json() prawidłowo pobiera tylko teraz nie wiem co zrobic aby z tego response.json() wychwycić array z danymi

0

No jak widzisz w swoim JSONie nie masz pola results więc

json['results']

nie ma sensu. Popraw to setData

0

Może i dodałeś to key do funkcji ale czy potem to używasz w kodzie htmlowym?
https://stackoverflow.com/questions/66703243/react-error-warning-each-child-in-a-list-should-have-a-unique-key-prop
Spróbuj za key przyjąć nazwę (np paracetamol z Twojego przykładu)

0

Co do pierwszego problemu, to wydaje mi się że

Dodawałem w moim userControler nagłówek : @CrossOrigin(origins = "http://localhost:3000")

Stronke masz na porcie :8080, a backend :3000

A zatem

Definition of an origin
Two URLs have the same origin if the protocol, port (if specified), and host are the same for both.

A zatem musiałbyś pozwolić na porcie 8080, a nie 3000?

1 użytkowników online, w tym zalogowanych: 0, gości: 1