Problem z CORS przy requeście mimo ustawionych nagłówków

Siema.

Problem wygląda następująco, mam postawioną maszynę na AWS, na niej hostuję sobie aplikację reactową która puszcza requesty do serwera php również na tym samym hoście, z tym że w odpowiedzi na request dostaję jedynie plucie się o CORS'a: "Zablokowano żądanie do zasobu innego pochodzenia: zasady „Same Origin Policy” nie pozwalają wczytywać zdalnych zasobów z „http://localhost:8080/hello.php” (nieudane żądanie CORS). Kod stanu: (null)."

Tak wygląda request:

await fetch(`http://localhost:8080/hello.php`, {
      method: "GET",
    })
      .then(response => response.json())

A tak wyglądają nagłówki w php:

header("Access-Control-Allow-Origin: http://localhost:3000/");
header('Access-Control-Allow-Methods: GET, POST');
header("Access-Control-Allow-Headers: X-Requested-With");

Proszę o podpowiedzi o co chodzi, bo już nie mam pomysłów :D

Może chodzi o różnicę między localhost:8080 (JS) vs localhost:3000 (PHP)?

@Patryk27: Jak w takim razie to rozwiązać? Nie znam się za bardzo na webówce ;D

header("Access-Control-Allow-Origin: http://localhost:8080");

Przypuszczam, że jakoś tak

@Patryk27: Nadal nie działa ;d

@Patryk27: Cały plik hello.php:

<?php
        echo("he2asasdfdfo");

        header("Access-Control-Allow-Origin: http://localhost:3000/");
        header('Access-Control-Allow-Methods: GET, POST');
        header("Access-Control-Allow-Headers: X-Requested-With");
        header("Access-Control-Allow-Origin: http://localhost:8080");
?>

1. Wszystkie header() powinny być przed echo oraz podobnymi konstrukcjami (tj. nagłówki muszą być zawsze wysłane jako pierwsze w dokumencie); PHP ma na to warning, być może nawet i nim obrywasz.
2. AFAIR może istnieć tylko jedno Access-Control-Allow-Origin.

tl;dr

<?php
        header("Access-Control-Allow-Origin: http://localhost:8080");
        header('Access-Control-Allow-Methods: GET, POST');
        header("Access-Control-Allow-Headers: X-Requested-With");

        echo("he2asasdfdfo");
?>

@Patryk27: Nadal nic :(

Możesz jeszcze spróbować podmienić Access-Control-Allow-Origin: http://localhost:8080 na Access-Control-Allow-Origin: *, może akurat.

@Patryk27: Tego również próbowałem

Hej, nie znam sie na php, ale na serwerze ustawiasz możliwość komunikacji z danego klienta wykorzysujacego twoj backend. Czyli np. react stoi na porcie 3000 a serwer na 8080 to na serwerze ustawiasz mozliwosc uderzenia z 3000.

Jak na razie zrozumialem,ze probujesz wysylac dodatkowe naglowki ktore nic nie dadza

"Problem wygląda następująco, mam postawioną maszynę na AWS, " wiec nie mozesz uzywac localhost tylko wewnetrznych adresow IP

A ja bym jeszcze zastanowił się nad jedną rzeczą, skoro hostujesz gdzieś backend i frontend, a frontend strzela Ci pod localhosta, to wtedy localhost powinien "odnosić" sie do twojego ip (frontend będzie strzelał Http requestami pod do localhost:8080). Czy masz gdzieś jakąś dynamiczną podmianke localhosta na froncie na rzeczywisty adres IP backendu?

@chomikowski: Podmieniłem wszystkie localhosty na odpowiednio:

http://ip-172-31-45-253.eu-central-1.compute.internal:8080 - requesty w JS
http://ip-172-31-45-253.eu-central-1.compute.internal:3000 - headery w PHP

I nadal zawiecha.

@Aisekai_: Frontend i backend są na tym samym hoście

@brus97: Apache chyba nie filtruje portów, które mogą uderzać.

To najlepiej wylacz tego CORS z konsoli aws zeby na localu nie sprawdzal tego. Ja tak samo kiedys zrobielm tylko na google cloud pamietam. tez mi rzygal tym gownem

Nie o to mi chodziło. Jeśli twoja przegladarka wysyła request na localhost (nieważne czy to robisz ajaxem czy zwyczajny request) to i tak będzie to mapowane na twoje IP. To że backend i frontend są na jednym hoscie, nie ma tutaj nic do znaczenia.

Czy to co masz skonfigurowane jest dla preflighta (options request) czy np posta? Jeśli to drugie, to źle masz CORSa skonfigurowanego.

Metody POST, PUT I DELETE (tam jeszcze jakieś są) jako że z założenia zmieniają stan mają takie flow że najpierw wysyłają HTTP Options w którym oczekują np Allow-Origin, With-Credentials itd CORS Headery. Potem robią już faktyczny request w którym już oczekują headera AllowOrigin (jak nie dostaną to rewuest i tak pójdzie, backend go obsłuży ale przeglądarka podmieni response na jakiś z error codem).

@chomikowski: A to się da wyłączyć w ogóle? Szukałem jakichś informacji, ale jedyną opcją było "Access-Control-Allow-Origin: *" które u mnie nie działa.

@Aisekai_: "Czy to co masz skonfigurowane jest dla preflighta (options request) czy np posta?" - nie mam pojęcia