• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Endpointy wymagające autoryzacji używające metody innej niż get nie działają w react, a działają w postmanie

VPS Starter Arubacloud
+1 głos
607 wizyt
pytanie zadane 29 stycznia 2021 w JavaScript przez Michał Drożdżyński Początkujący (370 p.)

Tworzę aplikacje w reactcie, z backendem w laravelu. Endpointy nie wymagające autoryzacji, takie jak logowanie czy rejestracja działają bez problemu. Endpointy z autoryzacją wykorzystujące metodę get również działają. Natomiast te wymagajace autoryzacji i korzystające z innych method http  niż get za każdym razem się wysypują. Zwracany jest error 401. Ten problem w postmanie nie występuje.

 axios.post("http://localhost:8000/api/register", params)
        .then((response) => {
            this.props.login(response.data.access_token)
        })

Powyższy endpoint działa bez zarzutu,

    componentDidMount() {
        this.getFoodporn()
    }

    getFoodporn() {
        console.log(this.props.token)
        axios.get("http://localhost:8000/api/foodporn",{
            headers: {
                'Authorization': 'Bearer ' + this.props.token,
            }
        })
        .then((response) => {
            if (response.data.id === undefined) {
                this.setState({
                    empty: true,
                })
            } else {
                this.setState({
                    id: response.data.id,
                    userId: response.data.user_id,
                    name: response.data.name,
                    image: response.data.image,
                    points: response.data.points,
                    userName: response.data.user_name,
                })
            }

            let elem = document.getElementById("foodporn")
            elem.style.opacity =  1
        })
    }

    rateFoodporn(rating) {
        const rate = rating === 1 ? "good" : "bad"

        console.log(this.props.token)
        axios.patch(`http://localhost:8000/api/foodporn/${this.state.id}/${rate}`, {
            headers: {
                'Authorization': 'Bearer ' + this.props.token,
            }
        })
        .then((response) => {
            this.getFoodporn()
        })
        .catch((error) => {
            console.log(error.response)
        })
    }

Tutaj z kolei mamy 2 endpointy wymagające autoryzacji. Dla pewności w konsoli wyświetliłem token przed każdym z nich aby sprawdzić czy napewno jest identyczny, i okazało się że w obu przypadkach jest taki sam. Pierwszy z nich wykorzystuje metodę get i działa prawidłowo. Drugi natomiast z metodą patch zwraca error 401. Gdy zmieniłem w laravelu i reactcie metodę na get endpoint działał. Sprawdzałem też jak działa z innymi metodami, put i post, i występuje tam również error 401.
 

xhr.js:177 PATCH http://localhost:8000/api/foodporn/7/good 401 (Unauthorized)

To przykładowy błąd wyświetlany w konsolu. A poniżej screen z postmana z tym samym adresem

komentarz 29 stycznia 2021 przez ScriptyChris Mędrzec (190,190 p.)

Czy requesty, które nie działają (wspomniałeś o PATCH) nie są czasem wysyłane z preflightem, którego nie obsługujesz po stronie serwera? W zakładce Network devtoolsów możesz sprawdzić, czy wysyłany jest jeden request, czy dwa: pierwszy tzw. preflight i drugi docelowy - może któryś z nich nie jest obsługiwany.

komentarz 29 stycznia 2021 przez Michał Drożdżyński Początkujący (370 p.)

chodzi o to?

komentarz 29 stycznia 2021 przez ScriptyChris Mędrzec (190,190 p.)

Screen jest niewyraźny, ale z tego co widzę dwa ostatnie requesty są do tego samego endpointa i pierwszy z nich (prawdopodobnie właśnie preflight) zwraca 401. Sprawdź, czy i jakie nagłówki Access-Control-* są wysyłane do serwera i czy serwer na nie prawidłowo odpowiada (m.in. czy odsyła nagłówek Access-Control-Allow-Methods zawierający metodę PATCH).

komentarz 29 stycznia 2021 przez Michał Drożdżyński Początkujący (370 p.)

tak wygląda odpowiedź z serwera. Nie wysyłany jest do serwera nagłówek acces-control

komentarz 29 stycznia 2021 przez ScriptyChris Mędrzec (190,190 p.)
Możesz pokazać screen z panelu Headers (Nagłówki) dla tego pierwszego requesta z zakładki Network? Tam powinny być informacje o zarówno request i response headerach.
komentarz 29 stycznia 2021 przez Michał Drożdżyński Początkujący (370 p.)

@ScriptyChris,

komentarz 29 stycznia 2021 przez ScriptyChris Mędrzec (190,190 p.)

Ok i jeszcze dla spójności pokaż proszę analogiczny screen dla requesta, który zwraca status 201 - widocznego na tym screenie

1 odpowiedź

+2 głosów
odpowiedź 29 stycznia 2021 przez Tnifey Pasjonat (24,190 p.)
wybrane 29 stycznia 2021 przez Michał Drożdżyński
 
Najlepsza

Headers wysyłasz w Request.payload gdzie powinny byc w Request.headers tak sądzę :P

drugi parametr w axios.post to payload, trzeci to config

// masz
axios.patch(url, { headers: { authorization: `Bearer ${token}` })

// powinno być
axios.patch(url, payload, { headers: { authorization: `Bearer ${token}` })

 

komentarz 29 stycznia 2021 przez Michał Drożdżyński Początkujący (370 p.)
Nie bardzo rozumiem, co powinno znajdować się w payload? W tym endpointcie nie chce przesyłać żadnych danych
komentarz 29 stycznia 2021 przez Tnifey Pasjonat (24,190 p.)
wyślij pusty obiekt bo payload musi być podany w patch
komentarz 29 stycznia 2021 przez Michał Drożdżyński Początkujący (370 p.)
a jak daje w miejsce payload null to nic się nie zmianie i jest ten sam błąd
komentarz 29 stycznia 2021 przez Tnifey Pasjonat (24,190 p.)
musi się coś zmienić po tej zmianie, wyślij screen z devtools ze szczegółami tego requesta  :P
komentarz 29 stycznia 2021 przez Michał Drożdżyński Początkujący (370 p.)
Dobra, jednak to jest to, teraz działa, dzięki wielki!

Podobne pytania

0 głosów
1 odpowiedź 366 wizyt
pytanie zadane 2 maja 2021 w JavaScript przez Bakkit Dyskutant (7,600 p.)
+1 głos
0 odpowiedzi 108 wizyt
pytanie zadane 5 lipca 2022 w JavaScript przez Oskar Szkurłat Bywalec (2,780 p.)
+1 głos
1 odpowiedź 330 wizyt
pytanie zadane 2 kwietnia 2021 w JavaScript przez Oskar Szkurłat Bywalec (2,780 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...