[Bug] Erro com Cors policy no react js e java spring boot

Olá Vitória! Tudo bem?

O problema que você está enfrentando é relacionado à política de CORS (Cross-Origin Resource Sharing). Quando você faz uma requisição de um domínio diferente (neste caso, http://localhost:5173) para o backend (http://localhost:8080), o navegador bloqueia a requisição se o servidor não permitir explicitamente essa origem.

Para resolver isso, você precisa configurar o backend para permitir requisições do seu frontend. Vou sugerir algumas alterações na sua configuração de CORS no Spring Boot.

1. Atualizar a Configuração de CORS

   A sua classe CorsConfiguration está quase correta, mas é importante garantir que os headers necessários estão sendo permitidos. Vamos adicionar o método allowedHeaders e exposedHeaders:

   package med.voll.api.config;
   
   import org.springframework.context.annotation.Configuration;
   import org.springframework.web.servlet.config.annotation.CorsRegistry;
   import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
   
   @Configuration
   public class CorsConfiguration implements WebMvcConfigurer {
   
       @Override
       public void addCorsMappings(CorsRegistry registry) {
           registry.addMapping("/**")
                   .allowedOrigins("http://localhost:5173") // Especifique a origem do seu frontend
                   .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS", "HEAD", "TRACE", "CONNECT")
                   .allowedHeaders("Authorization", "Content-Type", "Accept")
                   .exposedHeaders("Authorization")
                   .allowCredentials(true);
       }
   }
   

2. Garantir que o Spring Boot está usando a configuração

   Certifique-se de que a sua classe de configuração está sendo carregada pelo Spring Boot. Isso geralmente é feito automaticamente se a classe estiver no pacote correto, mas vale a pena verificar.

3. Revisar a Requisição no Frontend

   O código do frontend parece estar correto, mas certifique-se de que o token JWT está sendo passado corretamente nos headers. Aqui está um exemplo do seu código com um pouco mais de detalhamento:

   const handleFormSubmit = async (e) => {
       e.preventDefault();
   
       const { titulo, inicio, encerramento, estado, gestor } = formProjeto;
   
       const dataInicial = inicio
           ? format(parse(inicio, 'dd-MM-yyyy', new Date()), 'yyyy-MM-dd')
           : format(new Date(), 'yyyy-MM-dd');
       const encerramentoEmData = parse(encerramento, 'dd-MM-yyyy', new Date());
       const dataFinal = format(encerramentoEmData, 'yyyy-MM-dd');
   
       const newRow = {
           titulo: titulo,
           inicio: dataInicial,
           encerramento: dataFinal,
           estado: estado.toUpperCase(),
           gestor: usuarioLogadoId,
       };
   
       try {
           const token = JSON.parse(localStorage.getItem('@user'))?.tokenJWT;
   
           if (!token) {
               console.error('Token JWT não encontrado no localStorage.');
               return;
           }
           console.log("Token:", token);
   
           const response = await axios.post("http://localhost:8080/Projeto", newRow, {
               headers: {
                   Authorization: `Bearer ${token}`,
                   'Content-Type': 'application/json'
               },
           });
   
           if (response.status === 200) {
               const updatedRows = [...rows, newRow];
               setRows(updatedRows);
               localStorage.setItem('formProjeto', JSON.stringify(updatedRows));
               handleClose();
               return;
           }
           console.error('Erro ao salvar os dados no backend.');
       } catch (error) {
           console.error('Erro ao conectar-se ao backend:', error);
       }
   };
   

4. Testar a Configuração

   Depois de fazer essas alterações, reinicie o servidor Spring Boot e tente fazer a requisição novamente pelo frontend.

Espero ter ajudado e bons estudos!