Spring Boot: クロスオリジンの問題を解決する方法

クロスオリジン問題の説明

次のエラー メッセージが表示される場合があります:

CORS ポリシーによってブロックされました: 要求されたリソースに「Access-Control-Allow-Origin」ヘッダーが存在しません

このエラーは、Access-Control-Allow-Origin ヘッダーがリソースにないため、特定のアドレスへのリクエストが CORS プロトコルによってブロックされたことを示します。

クロスオリジン問題の分析

クロスオリジン問題の根本的な原因は、セキュリティ上の理由からブラウザが現在のサイト外のリソースへのアクセスを制限していることです。

たとえば、http://127.0.0.1:8080/ でホストされている Web サイトに特定のページがあるとします。同じサイトからリソースにアクセスする場合、制限はありません。ただし、別のサイト (例: http://127.0.0.1:8081) からリソースにアクセスしようとすると、ブラウザはリクエストをブロックします。

注: プロトコル、ドメイン、ポートは「同一オリジン」の定義の一部として考慮されます。

img タグや script タグなどの src 属性を持つ要素には、この制限は適用されません。

歴史的に、フロントエンドとバックエンドが分離されていなかったとき、ページとリクエスト インターフェイスは同じドメインとポートの下に存在していました。これにより、ブラウザーは、1 つのドメインでホストされているページからのリクエストが同じドメインのリソースをリクエストできるようになります。

たとえば、http://127.0.0.1:8080/index.html は http://127.0.0.1:8080/a/b/c/userLit を自由にリクエストできます。

現在、フロントエンドとバックエンドが異なるアプリケーションに分離されているため、これは許可されておらず、CORS 問題の原因となります。

オリジンとクロスオリジンとは何ですか?

オリジン (またはソース) は、プロトコル、ドメイン、およびポート番号で構成されます。

URL はプロトコル、ドメイン、ポート、パスで構成されます。 2 つの URL は、プロトコル、ドメイン、ポートがすべて同一である場合、「同一オリジン」とみなされます。これら 3 つの要素のいずれかに違いがある場合、クロスオリジン リクエストが構成されます。

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 de même origine : 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
    }
}

以上がSpring Boot: クロスオリジンの問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。