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

What is the Same-Origin Policy?

The Same-Origin Policy is a fundamental browser security feature. Without it, the normal functionality of browsers could be at risk. Web architecture heavily depends on this policy, and browsers implement it to ensure security.

The Same-Origin Policy includes:

1. DOM Same-Origin Policy: Prevents DOM manipulation of different origin pages. Applies mainly to cross-origin iframe scenarios where different domains' iframes can't access each other.
2. XMLHttpRequest Same-Origin Policy: Prohibits HTTP requests to different origins using XHR objects.

Solving Cross-Origin Issues in Spring Boot

1. Creating a Filter to Handle CORS

In a project where the front-end and back-end are deployed separately, addressing CORS is crucial. Cookies are used to store user login information, and Spring interceptors manage permissions. Issues arise when the interceptor and CORS are processed in the wrong order, causing a CORS error.

An HTTP request first goes through the filter before reaching the servlet and then the interceptor. To ensure CORS processing occurs before authorization interception, we can place the CORS configuration in a filter.

@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. Configuring CORS in WebMvcConfigurer

While JSONP can address cross-origin issues on the front-end, it only supports GET requests, which is limiting in RESTful applications. Instead, you can handle cross-origin requests with Cross-Origin Resource Sharing (CORS) on the back-end. This solution is not unique to Spring Boot and has been used in traditional SSM frameworks. You configure it by implementing the WebMvcConfigurer interface and overriding the addCorsMappings method.

@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. Configuring CORS in Controller

You can enable CORS for specific controller methods by adding the @CrossOrigin annotation to the @RequestMapping annotation. By default, @CrossOrigin allows all origins and HTTP methods specified in @RequestMapping.

@RestController
@RequestMapping("/account")
public class AccountController {

    @CrossOrigin
    @GetMapping("/{id}")
    public Account retrieve(@PathVariable Long id) {
        // ...
    }

    @DeleteMapping("/{id}")
    public void remove(@PathVariable Long id) {
        // ...
    }
}

Understanding @CrossOrigin Parameters：

• @CrossOrigin without parameters allows all URLs to access.
• @CrossOrigin(origins = "http://127.0.0.1:8080") restricts access to the specified URL.
• This annotation can be used on classes or methods.
• The value or origins attribute specifies allowed URLs.
• maxAge indicates the maximum age in seconds for the preflight request cache.
• allowCredentials indicates if credentials (cookies) are allowed. Default is false.
• allowedHeaders specifies allowed request headers.
• methods specifies allowed request methods, default being GET, POST, HEAD.

Reasons @CrossOrigin Might Not Work

1. Spring MVC version must be 4.2 or higher to support @CrossOrigin.
2. Incorrect requests might appear as cross-origin issues due to improper server response.
3. If adding @CrossOrigin above the Controller annotation still results in issues, one possible fix is to specify the HTTP methods in @RequestMapping.

Example:

@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!