1
resposta

CORS - Access-Control-Allow-Origin + Angular 15.0 + nodejs 18.10 + API Spring Boot

Ola estou dento dificuldade de fazer a conexão entre meu fron-end (http://localhost:4200) e minha API http://localhost:8080. Eu acabei procurando na internet e encontrei diversos tutoriais sobre como contorna esse problema. Estas foram minhas mudanças

Na minha API do SpringBoot construí uma classe de configuração para lidar com o erro CORS

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Também fiz alterações nos meus endpoit

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

O código acima é um endpoint de efetuar login que retorna um token jtw foi colocado a anotação @CrossOrigin no método e no proprio endpoint

também tem outra classe de segurança que faz o filtro de acesso

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Logo depois disso eu gero o bild do projeto e rodo aplicação

Na minha parte do Front end eu tenho as seguintes configurações

na classe LoginComponet.ts

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Pego os dados do usuário e mando para meu AuthSerice.autheticate passando os dados

Na classe AuthService

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Pego os dados e mando para o endereco da minha API.

porem tbm faço outras alteraçoes

crio o arquivo src/proxy.conf.json

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

o codigo dentro do arquivo é

{
    "/": {
      "target": "http://localhost:8080",
      "secure": false,
      "changeOrigin": true
    }
  }
  

Depois no arquivo angular.json eu coloco o código

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

e no arquivo package.json coloco o código

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

e executo no terminal --> npm start

Agora vem a parte do Erro

no browser eu coloco os dados do usuário login senha tipoUsuario e clico em enter e depois de todas essa alterações ainda me aparece o erro

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

porem se eu executo pelo insominia ou postman não há erros

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

NAO SEI MAIS OQ FAZER.

1 resposta

Olá, Luiz!

Pela descrição e pelas imagens que você compartilhou, parece que você já tomou várias medidas para resolver o problema de CORS entre o seu front-end Angular e a API Spring Boot. Vamos tentar algumas outras abordagens que podem ajudar a solucionar o problema:

  1. Verifique as Configurações de Segurança: Na sua classe SecurityConfigurations, você configurou o CORS com http.cors(). Certifique-se de que o método securityFilterChain está sendo chamado corretamente e que não há nenhuma outra configuração de segurança que possa estar interferindo com o CORS.

  2. Reveja a Ordem dos Filtros: A ordem em que os filtros são aplicados no Spring Security é importante. Certifique-se de que o filtro CORS está sendo aplicado antes do filtro de autenticação.

  3. Consistência nos Endereços: Verifique se o endereço configurado no @CrossOrigin e no CorsConfiguration está exatamente igual ao endereço de origem que o navegador está enviando. Às vezes, pode haver uma discrepância, como o uso de www ou diferenças entre http e https.

  4. Teste sem o Proxy do Angular: Temporariamente, remova a configuração do proxy do Angular (proxy.conf.json) e tente fazer a requisição diretamente para ver se o erro persiste. Isso pode ajudar a isolar se o problema é com o proxy ou com a configuração do CORS na API.

  5. Headers de Resposta: Verifique se os headers de resposta do servidor incluem o Access-Control-Allow-Origin com o valor correto. Você pode fazer isso inspecionando a resposta no navegador ou usando ferramentas como o Postman.

  6. Verifique o Console do Navegador: Olhe para o console do navegador para quaisquer mensagens de erro adicionais que possam fornecer mais informações sobre o que está acontecendo.

  7. Logs do Servidor: Verifique os logs do servidor Spring Boot para ver se há alguma mensagem de erro ou aviso quando a requisição do navegador é recebida.

  8. Preflight Request: O navegador envia uma requisição de preflight (OPTIONS) antes do pedido real quando há uma requisição cross-origin. Verifique se a sua API está lidando corretamente com esse tipo de requisição.

Se após essas verificações o problema persistir, seria útil ver a mensagem de erro completa que o navegador está fornecendo, pois isso pode dar mais pistas sobre a natureza do problema.

Espero que essas sugestões te ajudem a resolver o problema com o CORS. Qualquer novidade manda aqui de novo.