Tratamento de redirecionamentos de solicitação GET e erros CORS no ReactJS

Encontrando um erro CORS quando um aplicativo ReactJS envia uma solicitação GET para um servidor e recebe um redirecionamento 302 pode ser um problema frustrante. A seguir fornece uma solução para esse problema:

Para resolver o erro CORS em seu cenário, onde um frontend ReactJS (f.com) solicita o servidor backend (b.com) no caminho '/users' e o back-end redireciona para a página de login do SSO (sso.example.com/login), você pode empregar a seguinte abordagem:

Client-Side Redirecionamento:

É mais simples lidar com o redirecionamento no lado do cliente dentro do navegador. Dessa forma, evitam-se problemas de CORS, pois o redirecionamento é feito diretamente para a URL do site do SSO.

Para realizar o redirecionamento do lado do cliente:

Opção 1: Usando React Router (Complex )

• Implemente o redirecionamento no React usando um roteador react.
• Consulte a documentação em: Navegar programaticamente usando o roteador react. V4

Opção 2: usando JavaScript simples (fácil)

• Use a propriedade window.location.href para redirecionar diretamente o navegador.
• Certifique-se de que possíveis problemas com o histórico do navegador sejam tratados adequadamente.

• Código sample:

  window.location.href = "https://www.example.com";

• Mais informações em: https://appendto.com/2016/04 /javascript-redirect-how-to-redirect-a-web-page-with-javascript/

Ao implementar uma dessas estratégias de redirecionamento, você pode lidar com sucesso Redirecionamentos de solicitação GET, evitando erros de CORS em seu aplicativo ReactJS.