CORS - Nie działa prawidłowo - Laravel, Vuejs

pytanie zadane 23 sierpnia 2020 w PHP przez Greeenone Pasjonat (16,100 p.)

Hej,

Drugie dzień zmagam się z tym przeklętym Corsem. Myslałem, że już rozwiązałem problem a tu taki &*!.

Od początku:
Mam apkę front w Vue i backend w Laravelu. W momencie deploy'a, miałem problemy z CORS. Po dobrych 10 godzinach udało mi się znaleźć rozwiązaniem którym było dodanie następującego kodu do htaccess laravela:

    <IfModule mod.headers. c>
    Header set Access-Control-Allow-Origin "*"
    Header set Access-Control-Allow-Methods "GET, POST, PATCH, PUT, DELETE, OPTIONS"
    Header set Access-Control-Allow-Headers "Origin, Content-Type, X-Auth-Token, Authorization, Accept"
    </IfModule>

Dodałem kod i.. Szok! Działa. Przy odpaleniu strony, apka pobrała info z bazy czy można się rejestrować, sprawdzała login i hasło, gdy te były nieprawidłowe, zwracała komunikat z bazy. Radość niestety nie trwała długo bo *** CORS postanowił robić kolejne problemy.

W momencie wpisania loginu i hasła, dane zostają przesłane na serwer a laravel zwraca kod 200 wraz z tokenem. Niestety strona się odświeża i znowu mam okno logowania. Zbadałem sytuacje i okazuje się, że przeglądarka zwraca:

Access to XMLHTTPRequest at 'X' from origin 'x' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: redirect is not allowed for a preflight request.

    Reason: CORS request external redirect not allowed
    Reason: CORS preflight response did not succeed
    Reason: CORS request did not succeed

I nie mam pojęcia czym jest to spowodowane.. Siedzę już drugi dzień wyrywające se włosy tak jak ptaszniki.. Nie mam pojęcia co robię źle :/

komentarz 23 sierpnia 2020 przez ScriptyChris Mędrzec (190,190 p.)

Niestety strona się odświeża i znowu mam okno logowania

Czy response zawiera nagłówek location - następuje przekierowanie strony? Pokaż screen z zakładki Network/Sieć devtoolsów przeglądarki.

komentarz 23 sierpnia 2020 przez Greeenone Pasjonat (16,100 p.)

Problem w tym, że nie mam jak złapać ponieważ strona się odświeża i znika wszystko z zakładki network Jedynie udało mi się utrwalić to na ss tylko tam mam "failed". Nawet nie moge wylapac "recorderem" bo request pojawia sie na ulamek sekundy

komentarz 23 sierpnia 2020 przez ScriptyChris Mędrzec (190,190 p.)

Czy opcja preserve log pomaga zachować te informacje mimo odświeżenia strony? Ewentualnie zaznacz breakpoint "load" > "beforeunload" w zakładce Sources.

komentarz 23 sierpnia 2020 przez Greeenone Pasjonat (16,100 p.)

Więc tak:
Przed przełączeniem apka sprawdza czy użytkownik jest zalogowany pod linkiem api/access która zwraca:

Provisional headers are shown
Accept: application/json, text/plain, */*
Authorization: Bearer 96|KwsRZukglEphvaMNaAe9TMoNqfCYlURGM9BrMXOASu4s21EHNSyHSKMDajz650IW2T3x4UrrotZN8ccx
Referer: https://fx.com/
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.135 Safari/537.36

a to drugi request (apka robi po dwa. Jeden z OPTION a drugi właściwy)

Request URL: https://api.x.com/api/access/
Referrer Policy: no-referrer-when-downgrade
access-control-allow-headers: Origin, Content-Type, X-Auth-Token, Authorization, Accept
access-control-allow-methods: GET, POST, PATCH, PUT, DELETE, OPTIONS
access-control-allow-origin: *
content-length: 706
content-type: text/html
date: Sun, 23 Aug 2020 20:38:02 GMT
location: https://api.x.com/api/access
server: LiteSpeed
status: 301
:authority: api.x.com
:method: OPTIONS
:path: /api/access/
:scheme: https
accept: */*
accept-encoding: gzip, deflate, br
accept-language: en-US,en;q=0.9,nl-NL;q=0.8,nl;q=0.7,pl;q=0.6
access-control-request-headers: authorization
access-control-request-method: GET
origin: https://x.com
referer: https://x.com/
sec-fetch-dest: empty
sec-fetch-mode: cors
sec-fetch-site: same-site
user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.135 Safari/537.36

komentarz 24 sierpnia 2020 przez Greeenone Pasjonat (16,100 p.)

@JSHolic,

Znalazłem rozwiązanie. Problemem były / dodawane na koniec url'a co powodowało problemy. Pytanie tylko, jak usunąć prawidłowo?

Mam coś takiego:

  get(resource, slug = "") {
    return Vue.axios.get(`${resource}/${slug}`).catch(error => {
      // console.log(error);
      throw new Error(`[KT] ApiService ${error}`);
    });
  },

I usunąłem /${slug}` ale co wtedy, kiedy moje zapytanie będzie musiało przesłać coś w get? Czy ustawiać to if'em czy istnieje jakiś inny sposób?

komentarz 24 sierpnia 2020 przez ScriptyChris Mędrzec (190,190 p.)

To serwer odrzuca URL ze slugiem (tzn. wtedy dostajesz błąd CORS)? Usuwanie go raczej nie jest rozwiązaniem problemu, bo przecież wtedy wyślesz request pod inny URL niż docelowy.

komentarz 24 sierpnia 2020 przez Greeenone Pasjonat (16,100 p.)

Tak. W momencie kiedy jest na końcu ukośnik, to otrzymuję błąd.

Na przykład sprawdzenie czy rejestracja jest włączona:

api.domain.com/api/check-register/ <- Wraca błąd CORS

api.domain.com/api/check-register <- Działa prawidłowo, serwer zwraca Success 200