Résolution des problèmes CORS de React et Spring Boot : demande GET bloquée

Comprendre les erreurs CORS dans les applications Spring Boot et React

Lors du développement d'applications Web à l'aide de Réagir pour le front-end et Botte de printemps pour le backend, un problème courant auquel les développeurs sont confrontés est la fameuse erreur CORS. Cette erreur se produit lorsque le navigateur bloque une requête pour des raisons de sécurité, notamment lors d'une tentative de connexion à un service backend hébergé sur un port ou un domaine différent. Dans ce cas, vous êtes confronté à un problème CORS lors de la création d'un Requête OBTENIR de React à une API Spring Boot.

Le message d'erreur indique généralement que le navigateur bloque votre demande car le Contrôle d'accès-Autoriser-Origine l'en-tête est manquant ou mal configuré. Il convient de noter que des outils comme Facteur n'appliquez pas ces restrictions de sécurité, c'est pourquoi votre requête peut fonctionner parfaitement dans Postman mais échouer dans le navigateur.

Dans votre scénario, le message d'erreur indique qu'une demande de contrôle en amont ne réussit pas le contrôle de contrôle d'accès. Cela se produit généralement lorsque certains en-têtes ou méthodes ne sont pas autorisés ou correctement configurés dans la stratégie CORS du serveur. Bien que la configuration CORS semble être en place côté serveur, des problèmes spécifiques peuvent survenir dans la façon dont il gère les requêtes du navigateur.

Cet article vous aidera à comprendre la cause première du problème et vous guidera à travers les solutions possibles pour résoudre le problème. Erreur CORS dans votre application React et Spring Boot.

Gestion des erreurs CORS dans les applications React et Spring Boot

Les scripts fournis ci-dessus visent à résoudre le problème de Erreurs CORS dans une configuration frontend React et backend Spring Boot. L'erreur se produit lorsque le frontend, hébergé sur « http://localhost:8081 », tente d'envoyer une requête GET à une API Spring Boot hébergée sur « http://localhost:8080 ». Les navigateurs appliquent des règles de sécurité strictes pour empêcher les requêtes d'origine croisée non autorisées, c'est pourquoi ces politiques CORS existent. Le WebMvcConfigureur La classe dans la configuration backend de Spring Boot aide à définir des règles CORS qui autorisent des origines et des méthodes spécifiques, résolvant finalement le problème.

Dans le backend, le fichier « CorsConfig.java » définit une classe de configuration Spring Boot. Le @Haricot et @Outrepasser les annotations sont utilisées pour injecter et personnaliser la configuration CORS. Dans la méthode `addCorsMappings()`, la fonction `allowedOrigins()` autorise explicitement les requêtes provenant de 'http://localhost:8081', garantissant que le navigateur reconnaît cette origine comme source fiable. L'inclusion de `allowedMethods()` garantit que toutes les méthodes HTTP, y compris GET, POST et OPTIONS, sont autorisées. Ceci est crucial car les navigateurs envoient généralement une requête OPTIONS de contrôle en amont pour vérifier si la requête GET réelle est autorisée.

Sur le frontend, React gère les requêtes en utilisant Axios, un client HTTP populaire. Dans la fonction `fetchData` du fichier `ProjectPage.tsx`, la fonction `axios.get()` envoie une requête GET au backend Spring Boot. L'option `withCredentials` est définie sur true, permettant l'envoi de cookies et d'informations d'authentification avec la demande. De plus, l'en-tête Authorization est inclus pour transmettre le jeton de l'utilisateur, garantissant ainsi que la demande est correctement authentifiée. Sans ces configurations, le navigateur bloquerait la demande pour des raisons de sécurité.

Enfin, le fichier de test unitaire, « CorsTest.java », valide que la configuration CORS fonctionne comme prévu. Ce test simule une requête HTTP OPTIONS à l'API backend, qui imite une véritable requête de contrôle en amont effectuée par le navigateur. Le test vérifie que la réponse contient les en-têtes corrects, tels que Contrôle d'accès-Autoriser-Origine, qui autorise les requêtes cross-origin depuis le frontend. La méthode `MockMvcResultMatchers.header()` garantit que le serveur répond correctement aux requêtes de contrôle en amont. En incluant des tests unitaires, les développeurs peuvent garantir que leur configuration CORS est fiable et fonctionnelle dans divers environnements.

// 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"));
   }
}

Explorer CORS dans le contexte de la sécurité et de la conception d'API

Lorsqu'il s'agit de CORS (partage de ressources inter-origines) dans les applications Web modernes, il est crucial de comprendre les implications en matière de sécurité. CORS est mis en œuvre comme mesure de sécurité par les navigateurs pour empêcher les sites Web malveillants d'effectuer des requêtes API non autorisées au nom des utilisateurs. Ceci est particulièrement important dans les scénarios où des données sensibles sont échangées entre les services frontend et backend, comme les jetons d'authentification et les informations d'identification des utilisateurs. Lors de la configuration de CORS dans un backend Spring Boot, il est essentiel de n'autoriser que les origines fiables à accéder aux ressources protégées, ce qui fait de la configuration de sécurité un élément clé de l'architecture du système.

Un autre aspect crucial est la gestion des requêtes de contrôle en amont, qui sont des requêtes automatiques effectuées par le navigateur avant la requête GET ou POST proprement dite. Cela se produit lorsque le client doit confirmer si le serveur autorise les requêtes d'origine croisée et prend en charge des en-têtes ou des méthodes spécifiques. Dans certains cas, des erreurs de configuration dans la gestion de ces demandes de contrôle en amont peut causer des problèmes, entraînant des erreurs CORS même lorsque la requête réelle fonctionne correctement dans des outils comme Postman. La configuration de « CorsRegistry » de Spring Boot avec les en-têtes et méthodes appropriés garantit que les demandes de contrôle en amont sont traitées correctement, permettant une interaction fluide entre le frontend et le backend.

De plus, la gestion CORS ne doit pas être statique ou universelle. Dans les environnements dynamiques tels que ceux gérés avec des microservices, différentes API peuvent avoir des exigences de sécurité différentes. Certaines API peuvent n'avoir besoin d'exposer que certaines méthodes, tandis que d'autres peuvent nécessiter un contrôle plus strict sur les origines. C'est là que le réglage fin de la configuration CORS pour chaque point de terminaison devient important. Une bonne gestion CORS contribue également à optimiser les performances de l'API en réduisant les demandes de contrôle en amont inutiles et en garantissant une interaction fluide avec les utilisateurs.