Spring Boot : comment résoudre les problèmes d'origine croisée
Sep 12, 2024 pm 10:15 PMDescription du problème d’origine croisée
Vous pourriez rencontrer le message d'erreur suivant :
a été bloqué par la politique CORS : aucun en-tête 'Access-Control-Allow-Origin' n'est présent sur la ressource demandée
Cette erreur indique qu'une requête adressée à une certaine adresse a été bloquée par le protocole CORS car l'en-tête Access-Control-Allow-Origin est manquant dans la ressource.
Analyser les problèmes d'origine croisée
La cause première des problèmes d'origine croisée est que les navigateurs, pour des raisons de sécurité, restreignent l'accès aux ressources en dehors du site actuel.
Par exemple, considérons un site Web hébergé sur http://127.0.0.1:8080/ avec une certaine page. Si vous accédez aux ressources du même site, il n'y a aucune restriction. Mais si vous essayez d'accéder aux ressources d'un autre site (par exemple, http://127.0.0.1:8081), le navigateur bloquera la demande.
Remarque : Nous considérons le protocole, le domaine et le port dans le cadre de la définition d'une « même origine ».
Les éléments avec un attribut src, comme les balises img et script, ne sont pas soumis à cette restriction.
Historiquement, lorsque le front-end et le back-end n'étaient pas séparés, les pages et les interfaces de requête existaient sous le même domaine et le même port. Les navigateurs autoriseraient alors les requêtes d'une page hébergée sur un domaine à demander des ressources du même domaine.
Par exemple, http://127.0.0.1:8080/index.html peut demander librement http://127.0.0.1:8080/a/b/c/userLit.
De nos jours, avec le front-end et le back-end séparés en différentes applications, cela n'est pas autorisé et déclenchera des problèmes CORS.
Qu’est-ce que l’origine et l’origine croisée ?
L'origine (ou source) comprend le protocole, le domaine et le numéro de port.
Une URL est composée d'un protocole, d'un domaine, d'un port et d'un chemin. Deux URL sont considérées comme « de même origine » si leur protocole, leur domaine et leur port sont tous identiques. Toute différence sur l'un de ces trois éléments constitue une demande d'origine croisée.
Envisagez des comparaisons d'origines croisées pour https://www.baidu.com/index.html :
URL | Cross-Origin | Reason |
---|---|---|
https://www.baidu.com/more/index.html | No | Same protocol, domain, and port |
https://map.baidu.com/ | Yes | Different domain |
http://www.baidu.com/index.html | Yes | Different protocol |
https://www.baidu.com:81/index.html | Yes | Different port |
Quelle est la politique de même origine ?
La politique de même origine est une fonctionnalité fondamentale de sécurité du navigateur. Sans cela, le fonctionnement normal des navigateurs pourrait être menacé. L'architecture Web dépend fortement de cette politique, et les navigateurs la mettent en œuvre pour garantir la sécurité.
La politique de même origine comprend :
- Politique DOM de même origine : empêche la manipulation DOM de différentes pages d'origine. S'applique principalement aux scénarios iframe d'origine croisée dans lesquels les iframes de différents domaines ne peuvent pas accéder les uns aux autres.
- Politique XMLHttpRequest Same-Origin : interdit les requêtes HTTP vers différentes origines à l'aide d'objets XHR.
Résoudre les problèmes d'origine croisée dans Spring Boot
1. Création d'un filtre pour gérer CORS
Dans un projet où le front-end et le back-end sont déployés séparément, aborder CORS est crucial. Les cookies sont utilisés pour stocker les informations de connexion des utilisateurs et les intercepteurs Spring gèrent les autorisations. Des problèmes surviennent lorsque l'intercepteur et le CORS sont traités dans le mauvais ordre, provoquant une erreur CORS.
Une requête HTTP passe d'abord par le filtre avant d'atteindre la servlet puis l'intercepteur. Pour garantir que le traitement CORS a lieu avant l'interception d'autorisation, nous pouvons placer la configuration CORS dans un filtre.
@Configuration public class CorsConfig { @Bean public CorsFilter corsFilter() { CorsConfiguration corsConfiguration = new CorsConfiguration(); corsConfiguration.addAllowedOrigin("*"); corsConfiguration.addAllowedHeader("*"); corsConfiguration.addAllowedMethod("*"); corsConfiguration.setAllowCredentials(true); UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource(); urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration); return new CorsFilter(urlBasedCorsConfigurationSource); } }
2. Configuration de CORS dans WebMvcConfigurer
Bien que JSONP puisse résoudre les problèmes d'origine croisée sur le front-end, il ne prend en charge que les requêtes GET, ce qui est limitant dans les applications RESTful. Au lieu de cela, vous pouvez gérer les requêtes d’origine croisée avec le partage de ressources cross-origine (CORS) sur le back-end. Cette solution n'est pas propre à Spring Boot et a été utilisée dans les frameworks SSM traditionnels. Vous le configurez en implémentant l'interface WebMvcConfigurer et en remplaçant la méthode addCorsMappings.
@Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("*") .allowCredentials(true) .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") .maxAge(3600); } }
3. Configuration de CORS dans le contrôleur
Vous pouvez activer CORS pour des méthodes de contrôleur spécifiques en ajoutant l'annotation @CrossOrigin à l'annotation @RequestMapping. Par défaut, @CrossOrigin autorise toutes les origines et méthodes HTTP spécifiées dans @RequestMapping.
@RestController @RequestMapping("/account") public class AccountController { @CrossOrigin @GetMapping("/{id}") public Account retrieve(@PathVariable Long id) { // ... } @DeleteMapping("/{id}") public void remove(@PathVariable Long id) { // ... } }
Comprendre les paramètres @CrossOrigin:
- @CrossOrigin sans paramètres permet l'accès à toutes les URL.
- @CrossOrigin(origins = "http://127.0.0.1:8080") restreint l'accès à l'URL spécifiée.
- Cette annotation peut être utilisée sur des classes ou des méthodes.
- L'attribut value ou origins spécifie les URL autorisées.
- maxAge indique l'âge maximum en secondes pour le cache des requêtes de contrôle en amont.
- allowCredentials indique si les informations d'identification (cookies) sont autorisées. La valeur par défaut est fausse.
- autoriséHeaders spécifie les en-têtes de requête autorisés.
- méthodes spécifie les méthodes de requête autorisées, la valeur par défaut étant GET, POST, HEAD.
Raisons pour lesquelles @CrossOrigin pourrait ne pas fonctionner
- La version Spring MVC doit être 4.2 ou supérieure pour prendre en charge @CrossOrigin.
- Des requêtes incorrectes peuvent apparaître comme des problèmes d'origine croisée en raison d'une réponse inappropriée du serveur.
- Si l'ajout de @CrossOrigin au-dessus de l'annotation Controller entraîne toujours des problèmes, une solution possible consiste à spécifier les méthodes HTTP dans @RequestMapping.
Exemple :
@CrossOrigin @RestController public class PersonController { @RequestMapping(method = RequestMethod.GET) public String add() { // some code } }
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!

Article chaud

Outils chauds Tags

Article chaud

Tags d'article chaud

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Top 4 frameworks JavaScript en 2025: React, Angular, Vue, Svelte

Comment fonctionne le mécanisme de chargement de classe de Java, y compris différents chargeurs de classe et leurs modèles de délégation?

Comment utiliser Maven ou Gradle pour la gestion avancée de projet Java, la création d'automatisation et la résolution de dépendance?

Node.js 20: Boosts de performances clés et nouvelles fonctionnalités

Iceberg: L'avenir des tables de Data Lake

Spring Boot SnakeyAml 2.0 CVE-2022-1471 Issue fixe

Comment puis-je implémenter des techniques de programmation fonctionnelle en Java?

Comment puis-je utiliser JPA (Java Persistance API) pour la cartographie relationnelle des objets avec des fonctionnalités avancées comme la mise en cache et le chargement paresseux?
