Corrigindo problemas de React e Spring Boot CORS: solicitação GET bloqueada

Compreendendo erros CORS em aplicativos Spring Boot e React

Ao desenvolver aplicações web usando Reagir para o front-end e Bota Primavera para o back-end, um problema comum que os desenvolvedores enfrentam é o infame erro CORS. Este erro ocorre quando o navegador bloqueia uma solicitação por motivos de segurança, especialmente ao tentar se conectar a um serviço de back-end hospedado em uma porta ou domínio diferente. Neste caso, você está lidando com um problema de CORS ao fazer um OBTER solicitação do React para uma API Spring Boot.

A mensagem de erro geralmente indica que o navegador está bloqueando sua solicitação porque o Acesso-Controle-Permitir-Origem o cabeçalho está ausente ou configurado incorretamente. É importante notar que ferramentas como Carteiro não aplique essas restrições de segurança, e é por isso que sua solicitação pode funcionar perfeitamente no Postman, mas falhar no navegador.

No seu cenário, a mensagem de erro indica que uma solicitação de simulação não passa na verificação de controle de acesso. Isso normalmente acontece quando determinados cabeçalhos ou métodos não são permitidos ou configurados corretamente na política CORS do servidor. Embora a configuração do CORS pareça estar em vigor no lado do servidor, pode haver problemas específicos na forma como ele lida com as solicitações do navegador.

Este artigo irá ajudá-lo a entender a causa raiz do problema e orientá-lo através de possíveis soluções para resolver o problema. Erro CORS em seu aplicativo React e Spring Boot.

Tratamento de erros CORS em aplicativos React e Spring Boot

Os scripts fornecidos acima visam resolver o problema de Erros de CORS em uma configuração de frontend React e backend Spring Boot. O erro ocorre quando o frontend, hospedado em 'http://localhost:8081', tenta fazer uma solicitação GET para uma API Spring Boot hospedada em 'http://localhost:8080'. Os navegadores impõem regras de segurança rígidas para evitar solicitações não autorizadas de origem cruzada, e é por isso que essas políticas CORS existem. O WebMvcConfigurer classe na configuração de back-end do Spring Boot ajuda a definir regras CORS que permitem origens e métodos específicos, resolvendo, em última análise, o problema.

No backend, o arquivo `CorsConfig.java` define uma classe de configuração Spring Boot. O @Feijão e @Substituir anotações são usadas para injetar e personalizar a configuração do CORS. No método `addCorsMappings()`, a função `allowedOrigins()` permite explicitamente solicitações de 'http://localhost:8081', garantindo que o navegador reconheça esta origem como uma fonte confiável. A inclusão de `allowedMethods()` garante que todos os métodos HTTP, incluindo GET, POST e OPTIONS, sejam permitidos. Isso é crucial porque os navegadores normalmente enviam uma solicitação OPTIONS de comprovação para verificar se a solicitação GET real é permitida.

No frontend, o React lida com solicitações usando Eixos, um cliente HTTP popular. Na função `fetchData` do arquivo `ProjectPage.tsx`, a função `axios.get()` envia uma solicitação GET para o backend Spring Boot. A opção `withCredentials` está definida como true, permitindo que cookies e credenciais de autenticação sejam enviados com a solicitação. Além disso, o cabeçalho Authorization é incluído para passar o token do usuário, garantindo que a solicitação seja autenticada corretamente. Sem essas configurações, o navegador bloquearia a solicitação por motivos de segurança.

Por último, o arquivo de teste de unidade, `CorsTest.java`, valida se a configuração do CORS está funcionando conforme o esperado. Este teste simula uma solicitação HTTP OPTIONS para a API de back-end, que imita uma solicitação de simulação real feita pelo navegador. O teste verifica se a resposta contém os cabeçalhos corretos, como Acesso-Controle-Permitir-Origem, que permite solicitações de origem cruzada do front-end. O método `MockMvcResultMatchers.header()` garante que o servidor esteja respondendo corretamente às solicitações de simulação. Ao incluir testes unitários, os desenvolvedores podem garantir que a configuração do CORS seja confiável e funcional em vários ambientes.

// CorsConfig.java
@Configuration
public class CorsConfig implements WebMvcConfigurer {
   @Override
   public void addCorsMappings(CorsRegistry registry) {
      registry.addMapping("/")
              .allowedOrigins("http://localhost:8081")
              .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
              .allowedHeaders("*")
              .allowCredentials(true);
   }
}

// ProjectPage.tsx
const ProjectsPage = () => {
   const [projectsData, setProjectsData] = useState<ProjectsData[]>([]);
   const projectsUrl = 'http://localhost:8080/api/projects/admin/toinspection';
   useEffect(() => { fetchData(); }, []);
   const fetchData = async () => {
      const token = Cookies.get('token');
      try {
         const response = await axios.get<ProjectsData[]>(projectsUrl, {
            headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}` },
            withCredentials: true
         });
         setProjectsData(response.data);
      } catch (error) {
         console.error("Error fetching projects:", error);
      }
   };
   return (
      <div>
         <AdminPageTemplate type="projects" children=<AdminModContent data={projectsData} />/>
      </div>
   );
};
export default ProjectsPage;

// CorsTest.java
@RunWith(SpringRunner.class)
@WebMvcTest
public class CorsTest {
   @Autowired
   private MockMvc mockMvc;
   @Test
   public void testCorsHeaders() throws Exception {
      mockMvc.perform(MockMvcRequestBuilders.options("/api/projects/admin/toinspection")
              .header(HttpHeaders.ORIGIN, "http://localhost:8081")
              .header(HttpHeaders.ACCESS_CONTROL_REQUEST_METHOD, "GET"))
              .andExpect(MockMvcResultMatchers.status().isOk())
              .andExpect(MockMvcResultMatchers.header().exists("Access-Control-Allow-Origin"))
              .andExpect(MockMvcResultMatchers.header().string("Access-Control-Allow-Origin", "http://localhost:8081"));
   }
}

Explorando CORS no contexto de segurança e design de API

Ao lidar com CORS (compartilhamento de recursos entre origens) em aplicações web modernas, é crucial compreender as implicações de segurança por trás disso. O CORS é implementado como medida de segurança pelos navegadores para evitar que sites maliciosos façam solicitações não autorizadas de API em nome dos usuários. Isto é especialmente importante em cenários onde dados confidenciais são trocados entre serviços frontend e backend, como tokens de autenticação e credenciais de usuário. Ao configurar o CORS em um backend Spring Boot, é essencial permitir que apenas origens confiáveis ​​acessem recursos protegidos, tornando a configuração de segurança um elemento-chave da arquitetura do sistema.

Outro aspecto crucial é o tratamento de solicitações de comprovação, que são solicitações automáticas feitas pelo navegador antes da solicitação GET ou POST real. Isso ocorre quando o cliente precisa confirmar se o servidor permite solicitações de origem cruzada e oferece suporte a cabeçalhos ou métodos específicos. Em alguns casos, configurações incorretas no tratamento desses solicitações de simulação pode causar problemas, resultando em erros de CORS mesmo quando a solicitação real funciona bem em ferramentas como o Postman. Configurar o `CorsRegistry` do Spring Boot com os cabeçalhos e métodos corretos garante que as solicitações de comprovação sejam processadas corretamente, permitindo uma interação suave entre frontend e backend.

Além disso, o manuseio do CORS não deve ser estático ou de tamanho único. Em ambientes dinâmicos como aqueles gerenciados com microsserviços, APIs diferentes podem ter requisitos de segurança diferentes. Algumas APIs podem precisar apenas expor determinados métodos, enquanto outras podem exigir um controle mais rigoroso sobre as origens. É aqui que o ajuste fino da configuração do CORS para cada endpoint se torna importante. O gerenciamento adequado do CORS também ajuda a otimizar o desempenho da API, reduzindo solicitações de comprovação desnecessárias e garantindo uma interação tranquila do usuário.