Spring Boot : comment résoudre les problèmes d'origine croisée

Description 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 :

1. 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.
2. 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

1. La version Spring MVC doit être 4.2 ou supérieure pour prendre en charge @CrossOrigin.
2. 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.
3. 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!