Solucionado (ver solução)
Solucionado
(ver solução)
7
respostas

Falha na autenticação via Fetch_API com método Post

Bom noite prezados, tudo bem?

Estou com um problema um pouco diferente do curso, eu mais um amigo estamos usando o curso como referência em nosso projeto, porém estamos passando por uma fase de frustração não parte da comunicação com nossa API. Venho através desse post pedir a ajudar de vocês colegas estudantes e até mesmo ao Instrutor para tentarmos desvendar o problema enfrentado! Sem mais delongas ... Esse é o nosso código do fetch

        const requestInfo = 
        {
            method:'POST',
            body:JSON.stringify({email:this.username.value , password:this.password.value, entity:'provider'}),
            headers: new Headers({
                'Content-type':'application/json; charset=UTF-8'
            })
        };

        function handleErrors(response) 
        {
            if (!response.ok) 
            {
                throw new Error('Não foi possivel fazer o login');
            }
            return response.json();
        }

        fetch('http://localhost:4212/login', requestInfo)
            .then(handleErrors)
            .then(success => {console.log("Success: " + success);})
            .catch(error => {console.log("Error: " + error.message);})

No entanto quando executado o mesmo se ao menos pingar na API retorna error 404 mesmo com username e password corretamente digitados. Vale ressaltar que quando a requisição é feita pelo Postman, funciona normalmente com deveria. Mais detalhadamente segue link da nossa dúvida no stackoverflow, com prints do problema aqui relatado. Link: https://pt.stackoverflow.com/questions/224418/fetch-api-cannot-load-url-response-for-preflight-has-invalid-http-status-code

7 respostas

Boa noite, o problema é que esse framework precisa executar um preflight na api para saber se pode executar seu método ou não, sem mais informações do seu backend não tenho como ajudar muito.

De maneira geral, seu backend precisa permitir que requisições OPTIONS executem normalmente. Quando você der mais detalhes do backend eu tento ajudar mais.

PS: Postman não executa preflight, mas acho que se ao invés de GET você executar ele com OPTIONS o resultado vai ser idêntico ao seu erro.

Olá. Tudo bom e com você?

Se vocêe stá recebendo um 404 significa que o recurso da sua API não existe. Vale a pena você dar uma olhada se a URL que você está usando no JavaScript é a mesma que você está utilizando no postman?

Vou dar um palpite, mas não tenho certeza se vai funcionar, tem diferença se colocar o / no fim da url?

Bom dia ! Agradeço a atenção.

Eu tentei adicionar a / no final, porém o erro continua.

Estas são as configurações do back:

ACESSO:

 @Override
    protected void configure(HttpSecurity httpSecurity) throws Exception {
        httpSecurity
                .csrf()
                .disable()
                .exceptionHandling()
                .authenticationEntryPoint(authenticationEntryPoint)
                .and()
                .sessionManagement()
                .sessionCreationPolicy(SessionCreationPolicy.STATELESS)
                .and()
                .authorizeRequests()
                .antMatchers(HttpMethod.GET, "/refresh/**").permitAll()
                .antMatchers(HttpMethod.GET, "/login/**").permitAll()
                .antMatchers(HttpMethod.POST, "/refresh/**").permitAll()
                .antMatchers(HttpMethod.OPTIONS, "/login/**").permitAll()
                .antMatchers(HttpMethod.POST, "/login/**").permitAll()
                .antMatchers(HttpMethod.POST, "/provider/**").permitAll()
                .antMatchers(HttpMethod.POST, "/student/**").permitAll()
                .antMatchers(HttpMethod.POST, "/forgot-password/**").permitAll()
                .antMatchers(HttpMethod.PUT, "/forgot-password/**").permitAll()
                .anyRequest().authenticated()
                .and()
                .exceptionHandling();

        httpSecurity
                .addFilterBefore(authenticationTokenFilterBean(), UsernamePasswordAuthenticationFilter.class);
    }

CORS


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

        HttpServletResponse resp = (HttpServletResponse) response;
        resp.setHeader("Access-Control-Allow-Origin", "*");
        resp.setHeader("Access-Control-Allow-Credentials", "true");
        resp.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE, PATCH");
        resp.setHeader("Access-Control-Max-Age", "3600");
        resp.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Accept-Encoding, Content-Encoding, " + AppConstant.TOKEN_HEADER);

        HttpServletRequest httpRequest = (HttpServletRequest) request;
        String authToken = httpRequest.getHeader(AppConstant.TOKEN_HEADER);

        //validação do token....

        chain.doFilter(request, response);
    }

Você tem certeza absoluta que o arquivo do CORS está sendo aplicado ao seu servlet? Verifica por favor se ele está realmente executando.

solução!

Boa noite ! Rodrigo, vlw pela atenção cara. Sim, os cors chegavam sim...no post que eu fiz la no stackoverflow deu para upar uma imagem mostrando eles... Não sei o motivo mas eu preciso dessa linha de código para que metodos distintos de GET funcionem também.

.antMatchers(HttpMethod.OPTIONS, "/**").permitAll()

Se eu declarar somente POST/PUT não funciona. Tenho que esudar mais para descubrir. Obrigado !

Foi como eu te disse na primeira resposta, existe um preflight, ou seja, um "e ai api, o que eu posso usar em você?" Isso que significa o OPTIONS. Se der uma olhada no retorno de uma requisição OPTIONS você vai entender melhor.