-1

Resumo : Quando o Faço requisições ao BackEnd com o Postman tudo ocorre bem, mas quando faço requisições com o Front-End ReactJS Axios chegam 2 requisições à API, 1 sem Token e outra com Token.

Estou em um projeto que consistem em uma API Java (JAX-RS - JERSEY2) que é consumida por uma aplicação REACTJS (Axios implementando o XMLHttpRequest).

Quando o Front-End faz uma Requisição para a API em determinados End-Points se faz necessário o uso do Token no Header da requisição.

Segue o código do Filtro da API:

@Provider()
@Priority(Priorities.AUTHENTICATION)
public class Authentication implements ContainerRequestFilter {

    @Context
    private UriInfo uriInfo;

    @Override
    public void filter(ContainerRequestContext requestContext) throws IOException {
        JWTController jwt_controller = new JWTController();
        String authorizationHeader = requestContext.getHeaderString(HttpHeaders.AUTHORIZATION);
        System.out.println(authorizationHeader == null);
    }
}

Requisições feitas com o POSTMAN retorna :

> false

Requisições feitas com o AXIOS retorna :

> true
> false

Segue código do Javascript que faz as requisições:

Arquivo que guarda as Instancias do Axios services/api:

import Axios from 'axios';

export const api = Axios.create(//Instacia para requisições sem Token
    {
        baseURL:"http://localhost:8080/beta_projects"
    }
);
export const api_with_token = Axios.create(//Instacia para requisições com Token
    {
        baseURL:"http://localhost:8080/beta_projects"      
    }
);

arquivo pages/home.js:

try {
            let token = localStorage.getItem("token");
            let id_user = getIdUser(token);
            let URL = `user/${id_user}/activities`;
            api_with_token.defaults.headers.common['Authorization'] = `Bearer ${token}`;
            let response = await api_with_token.get(URL);
            this.setState({ activities: response.data });
            console.log(response.data);
            return response;
        } catch (err) {
            console.log(err.response);
            return err;
        }

Não entendo o porque das duas requisições.

[RESOLUÇÃO] Abrir o filtro de autenticação para requisições do tipo OPTIONS da seguinte maneira

if (isPublic() || requestContext.getMethod().equals("OPTIONS")) {
            return;

}

4
  • da uma olhada na aba network do navegador e veja as requisições, acho bem provável que a primeira requisição seja uma chamada de options Commented 5/10/2020 às 22:33
  • É sim, estou fazendo um GET na API, e a primeira é do tipo OPTIONS. Aparentemente ela deve estar ali trazendo informações da API.. Mas como eu conseguiria filtrar isso? Commented 6/10/2020 às 0:13
  • O resource que estou buscando é do tipo GET, mas ele manda essa PREFLIGHT Request do tipo OPTIONS e ela volta com o status 401. Commented 6/10/2020 às 0:20
  • não tem como fugir muito disso já que sempre que for enviada uma requisição "não simples" esse options vai ser enviado antes, o que você pode fazer talvez seria liberar a requisição options na config de cors do seu backend Commented 6/10/2020 às 11:35

1 Resposta 1

0

O false ocorre provavelmente porque a primeira requisição é options e logo em seguida acontece uma atualização do estado do componente, fazendo ele renderizar novamente, então ocorre a segunda chamada que retorna true.

Tente fazer da maneira tradicional usando then, catch para poder obter a resposta do servidor e caso seja sucesso você já retorna true e caso ocorra erro retorne false, segue:

   try {
        let token = localStorage.getItem("token");
        let id_user = getIdUser(token);
        let URL = `user/${id_user}/activities`;
        api_with_token.defaults.headers.common['Authorization'] = `Bearer ${token}`;
        await api_with_token.get(URL).then((response) => {
        this.setState({ activities: response.data });
        console.log(response.data);
        return true;
        }).catch((err) => {console.log('Erro: ', err); return false;});
    } catch (err) {
        console.log(err.response);
        return err;
    }
1
  • Boa noite Lucas! Vi na aba network do navegador e ele faz duas chamadas 1 Options e outra com o verbo que eu escolhi (POST, GET, PUT, DELETE, etc).. O "problema" era no CORS do Back-End pois ele não estava autorizando requisições sem cabeçalho de authorização e no caso do verbo Options ele não leva o Token junto. A solução foi liberar o filtro do CORS quando as requisições forem do tipo 'OPTIONS'. Muito obrigado pela resposta!! Commented 20/10/2020 às 4:01

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .