Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Como desativar cors completamente?

Boa noite. Estou com problemas para fazer a autenticação por causa de uma coisa chamada Cors. A aplicação REST foi feita no Spring. O problema está no site feito em Angular. Tudo funciona corretamente quando a autenticação está desativada. Com autenticação ativada, quando faço login, recebo o token normalmente, mas quando tento enviar o token para um caminho protegido, não funciona.

O console mostra o seguinte erro:

Requisição cross-origin bloqueada: A diretiva Same Origin (mesma origem) não permite a leitura do recurso remoto em http://x.x.x.x:3000/projetos (motivo: falta cabeçalho 'Access-Control-Allow-Origin' no CORS). Código de status: 403.
Requisição cross-origin bloqueada: A diretiva Same Origin (mesma origem) não permite a leitura do recurso remoto em http://x.x.x.x:3000/projetos (motivo: falha na requisição CORS). Código de status: (null).

O servidor até recebe a chamada, mas o token está vindo como null.

Não sei com certeza se o problema está no Angular ou no Spring. Acho que está no Angular porque tudo está funcionando perfeitamente no Insomnia.

Este é o interceptor do Angular que adiciona o token.

intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    if(this.tokenService.estaLogado()) {
      const token = this.tokenService.retornarToken();

      console.log(token) //Exibe o token corretamente

      request = request.clone({
        setHeaders: {
            'Authorization': `Bearer ${token}`
        }
      })
      
    }
    return next.handle(req);
}

Arquivos do Spring:

@Configuration
public class CorsConfiguration implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
            .allowedOrigins("*")
            .allowedMethods("*")
            ;
    }

}

    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        return http
            .csrf(csrf -> csrf.disable())
            .sessionManagement(sm -> sm.sessionCreationPolicy(SessionCreationPolicy.STATELESS))
            .authorizeHttpRequests(req -> {
                req.requestMatchers("/login").permitAll();
                req.anyRequest().authenticated();
            })
            .addFilterBefore(securityFilter, UsernamePasswordAuthenticationFilter.class)
            .build();
    }

Já tentei adicionar o ip (estático) do computador no CorsConfiguration, mas mesmo assim não funcionou. De qualquer forma, não vejo sentido em API saber o endereço de quem vai acessá-lo, porque isso quebra de independência e encapsulamento, e exigiria atualizar o arquivo sempre que tiver mudança na lista de quem vai acessar a API.

1 resposta
solução!

Olá Teo, como vai? Espero que esteja bem!

O CORS (Cross-Origin Resource Sharing) é uma especificação do W3C e faz parte do HTML5, destinada a permitir que recursos sejam acessados por domínios diferentes daquele que os serviu. Seu erro está relacionado a essa política de segurança implementada pelos navegadores, que impede que um domínio acesse recursos de outro domínio, a menos que o servidor do outro domínio permita explicitamente.

A partir do seu código, parece que você já configurou o CORS no lado do servidor Spring, permitindo todos os métodos e origens. No entanto, o erro sugere que o cabeçalho 'Access-Control-Allow-Origin' ainda está faltando na resposta.

Vamos tentar adicionar explicitamente esse cabeçalho em sua configuração Spring:

@Configuration
public class CorsConfiguration implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
            .allowedOrigins("*")
            .allowedMethods("*")
            .allowedHeaders("*")
            .allowCredentials(true)
            .exposedHeaders("Authorization");
    }

}

Neste código, .allowedHeaders("*") permite todos os cabeçalhos de solicitação, .allowCredentials(true) permite o envio de cookies e .exposedHeaders("Authorization") expõe o cabeçalho de autorização na resposta.

No entanto, é importante notar que permitir todas as origens, métodos e cabeçalhos pode ser uma prática insegura. Você deve restringir isso de acordo com suas necessidades de segurança.

Sobre o seu interceptor Angular, o código parece correto. Ele adiciona o token de autorização à solicitação se o usuário estiver logado.

Se o problema persistir após essas alterações, sugiro que você verifique se o token está sendo enviado corretamente e se o servidor está configurado para aceitar e decodificar o token corretamente.

Espero ter ajudado e bons estudos!

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