1 - Introdução 2 - Criando projeto 3 - Gerando tabela 4 - Estruturando projeto 5 - Configurando repositório 6 - Configurando controle 7 - Modelo para validar requisições 8 - Serviço para listar produtos 9 - Rota para listar produtos 10 - Serviço para cadastrar produtos 11 - Rota para cadastrar produtos 12 - Serviço para alterar produtos 13 - Rota para alterar produtos 14 - Serviço para remover produtos 15 - Rota para remover produtos 16 - Cors 17 - Criando projeto React 18 - Criando componentes no React 19 - Estrutura de formulário no React 20 - Estrutura de tabela no React 21 - Estilizando componentes 22 - Visibilidade dos botões 23 - Obtendo os produtos 24 - Exibindo os produtos na tabela 25 - Objeto produto 26 - UseState de produto 27 - Obtendo dados do formulário 28 - Cadastrar produtos 29 - Limpar formulário 30 - Selecionar produto 31 - Cancelando alteração e exclusão 32 - Remover produto 33 - Alterar produto 34 - Considerações finais

16 - CORS

Nessa décima sexta parte do nosso tutorial, iremos resolver o problema de CORS (Cross-Origin Resource Sharing) ou Compartilhamento de recursos com origens diferentes.

Erros de CORS ocorrem devido uma segurança implementanda nos navegadores. Uma página que esteja sendo executada em uma porta (exemplo: 4000), não pode ter acesso a dados em outros locais. Supondo que uma aplicação em Sring esteja na porta 8080 e uma aplicação em React esteja na porta 3000, o navegador irá recusar essa conexão.

Para resolvermos o problema de CORS, precisamos fazer com que nosso back-end libere o acesso para outras origens, utilizando o Spring há o comando Crossrigin, onde podemos especificar quais portas podem realizar requisições para nossa aplicação.

Abaixo estarei deixando uma estrutra simples de front-end para que sejam realizados testes em sua aplicação back-end. Essa estrutura pode ser utilizada independente a linguagem ou framework escolhido para criar sua API (Spring Boot, ASP.NET Core, Flask, Django, Express...).

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Teste CORS</title>

      <script>

          fetch('http://localhost:8080/listar')   // Realiza a requisição
          .then(produtos => produtos.json())      // Converte o valor recebido em JSON
          .then(retorno => console.log(retorno))  // Exibindo os produtos

      </script>

  </head>
  <body>
      
  </body>
  </html>

Acompanhe o vídeo para conseguir resolver o problema de CORS no Spring, bons estudos!