• 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

+1 głos
113 wizyt
pytanie zadane 29 stycznia 2021 w JavaScript przez Michał Drożdżyński Początkujący (340 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 (171,760 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 (340 p.)

chodzi o to?

komentarz 29 stycznia 2021 przez ScriptyChris Mędrzec (171,760 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 (340 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 (171,760 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 (340 p.)

@ScriptyChris,

komentarz 29 stycznia 2021 przez ScriptyChris Mędrzec (171,760 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 (23,310 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 (340 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 (23,310 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 (340 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 (23,310 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 (340 p.)
Dobra, jednak to jest to, teraz działa, dzięki wielki!

Podobne pytania

0 głosów
1 odpowiedź 101 wizyt
pytanie zadane 2 maja 2021 w JavaScript przez Bakkit Mądrala (7,020 p.)
+1 głos
1 odpowiedź 98 wizyt
pytanie zadane 2 kwietnia 2021 w JavaScript przez Oskar Szkurłat Bywalec (2,140 p.)
0 głosów
0 odpowiedzi 46 wizyt

86,459 zapytań

135,216 odpowiedzi

300,377 komentarzy

57,209 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...