Comment gérer les redirections 302 depuis les serveurs SSO et éviter les erreurs CORS dans ReactJS ?

Requête ReactJS GET redirigée avec 302, rencontre une erreur CORS

Dans les environnements de développement ReactJS, l'authentification des utilisateurs via l'authentification unique (SSO) peut présenter des défis lorsque le backend répond avec une redirection 302. Explorons le scénario et trouvons une solution pour surmonter l'erreur CORS.

Scénario :

• Serveur frontend : application ReactJS exécutée sur f.com
• Serveur backend : API Golang exécutée sur b.com
• Serveur SSO : sso.example.com

Problème :

ReactJS envoie une requête GET à b.com/users. Le backend répond par une redirection HTTP 302 vers la page SSO à l'adresse sso.example.com/login. Cependant, l'application ReactJS rencontre une erreur CORS provenant de sso.example.com, qui bloque la redirection.

Solution :

Puisque vous n'avez aucun contrôle sur le Serveur SSO et ne pouvant pas modifier ses entêtes de réponse, il est préférable de gérer la redirection côté client en JavaScript. Cette approche évite les problèmes CORS :

Option 1 : React Router

Vous pouvez naviguer par programme à l'aide de React Router pour gérer la redirection côté client. Cependant, cette méthode est plus complexe.

Option 2 : Window.location.href

Pour une approche plus simple et directe, vous pouvez utiliser window.location.href propriété pour rediriger l'utilisateur vers la page SSO :

<code class="javascript">window.location.href = "https://www.example.com";</code>

Remarque : Cette méthode peut avoir des implications sur l'historique de navigation.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!