6
respostas

Adicionar header em requisições

Estou com dúvida de como inserir header nas requisições http. Pesquisei na documentação e pela internet a fora, mas, as soluções que encontrei não funcionaram. Segue como estou fazendo:

    let headers = new Headers();
    headers.append('Content-Type', 'application/json');
    headers.append('Authorization', 'Bearer ' + this._token.value);

    return this._http
        .get(url,{headers:headers})
        .map(res => res.json())
        .toPromise()
        .then(dados => {
            console.log(dados);
        });

Já tentei usando o RequestOptions, mas também não funcionou. No cabeçalho dessa requisição não é inserido essas inforamações. Segue como fica:

Accept:*/*
Accept-Encoding:gzip, deflate, br
Accept-Language:pt-BR,pt;q=0.8,en-US;q=0.6,en;q=0.4
Access-Control-Request-Headers:authorization,content-type
Access-Control-Request-Method:GET
Connection:keep-alive
Host:localhost:8080
Origin:http://localhost:8100
Referer:http://localhost:8100/?ionicplatform=android
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36

Deveria ficar assim:

Accept:application/json, text/plain, */*
Accept-Encoding:gzip, deflate
Accept-Language:pt-BR,pt;q=0.8,en-US;q=0.6,en;q=0.4
Authorization:Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJUaWFnbyIsImV4cCI6MTQ5ODk0OTMxNn0.6iuE8a29msJLyp5hhQks3H52A5Wh-ZQFYHJQbqlI-5qRZmeU4SD-pUpAmHqnQ8cWSNJBqXEYDVe4eGXcR6oeAg
Connection:keep-alive

Professor Flávio, help me please.

6 respostas

No lado do Angular você fez correto. Tem que verificar sua API. O que ela espera.

Sua API e feita em que?

A minha API espera encontrar o cabeçalho header, achando verifica a existência do token. Na API eu uso java (spring boot). Segue logo abaixo o meu filter:

@Override
    public void doFilter(ServletRequest request, ServletResponse response,
            FilterChain chain) throws IOException, ServletException {

        HttpServletRequest req = (HttpServletRequest) request;
        HttpServletResponse resp = (HttpServletResponse) response;

        String header = req.getHeader("Authorization");

        System.out.println(header);

        String token = null;

        try {
            token = header.substring(7);
            Jwts.parser().setSigningKey("chave").parseClaimsJws(token).getBody();
            chain.doFilter(request, response);
        } catch (SignatureException e) {
            resp.sendError(HttpServletResponse.SC_UNAUTHORIZED, "Token inválido");
            //throw new ServletException("Token inválido");
        } catch (ExpiredJwtException e) {
            resp.sendError(HttpServletResponse.SC_UNAUTHORIZED, "Token expirado");
        } catch (NullPointerException e) {
            resp.sendError(HttpServletResponse.SC_UNAUTHORIZED, "Token inexistente ou nulo");
        }
    }

Essa solução funciona perfeitamente em aplicação web, mas por algum motivo não está funcionando aqui. Tem uma linha que eu imprimo no console a busca pelo cabeçalho "Authorization" e está retornando null sempre, já na aplicação web ele consegue encontrar facilmente. Aonde será que estou errando?

Seu backend deve permitir a manipulação do header. Geralmente quando CORS é ativado isso é permitido (Não sei como ativar isso no Spring, você precisa verificar).

Outra coisa, você pode tentar usar


let options = new RequestOptions({ headers: headers });

Passe option como segundo parâmetro do get.

Flavio eu tenho feito da seguinte maneira:

let myHeaders = new Headers({
            'Accept': 'application/json, text/plain, */*',
            'Content-Type': 'application/json',
            'Authorization': 'Bearer ' + this._token.value
        });

        let options = new RequestOptions({
            headers: myHeaders
        });

        return this._http
            .get(url,options)
            .map(res => res.json())
            .toPromise()
            .then(funcionario => {
                //console.log(caixa);
                return funcionario;
            });

E no spring eu já ativei o cors, olha o resultado no navegador:

Access-Control-Allow-Headers:x-requested-with, Content-Type, Accept, remember-me, Authorization
Access-Control-Allow-Methods:POST, GET, PUT, OPTIONS, DELETE
Access-Control-Allow-Origin:*
Access-Control-Max-Age:3600
Content-Length:4
Content-Type:application/json;charset=UTF-8
Date:Sun, 02 Jul 2017 13:19:41 GMT

Veja que aceita requisições de qualquer origem. Se estiver alguma coisa errada por favor me avise. Agora Flavio, eu não sei o motivo, mas de vez em quando ele consegue ler o header e outras vezes não, ou seja algumas vezes o servidor consegue identifcar que no header está presente o token, mas, na maioria das vezes ele nem sequer consegue verificar a existencia de um header 'Authorization', nessas vezes percebo que de alguma forma o ionic não está enviando o header 'Authorization' e por consequência o token.

Olha, seu ionic deverá enviar o token que recebeu na autenticação sempre para o backend para qualquer operação realizada que esteja protegida. Se não fizer isso sua API não deixará futuras requisições passarem. É o princípio da autenticação por token. Da um conferida nisso.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software