バックエンドにおけるクロスドメインの問題に対する 3 つのソリューションを共有する

1. クロスドメインの概要

クロスオリジン リソース共有 ( CORS-Cross-Origin Resource Sharing、クロスオリジン リソース共有、または一般にクロスドメイン リソース共有と訳される) は、HTTP ヘッダーに基づくメカニズムであり、サーバーがそれ自体のオリジン (ドメイン) 以外にマークを付けることを可能にします。 、プロトコル、またはポート）により、ブラウザーはこれらのオリジンへのアクセスを許可して独自のリソースをロードします。クロスオリジン リソース共有では、ブラウザがサーバーホストのクロスオリジン リソースへの「プリフライト」リクエストを開始するメカニズムを通じて、サーバーが実際のリクエストの送信を許可しているかどうかもチェックします。プリフライトでは、ブラウザーによって送信されるヘッダーは、実際のリクエストで使用される HTTP メソッドとヘッダーを示します。

2. クロスドメインの理由

クロスドメインの問題の原因は、ブラウザの「同一生成元ポリシー」によって発生します。同一オリジン ポリシーとは何ですか? 現在のページと要求されたページの 1 ネットワーク プロトコル、2 ホスト ドメイン名、3 ポートがまったく同じでなければならないことがブラウザによって規定されています。以下に示すように:

これは主に、インターネットをサーフィンするユーザーの基本的なセキュリティ ニーズを確保するためにブラウザによって設定されます。

1. 悪意のある Web ページが他の Web サイトのローカル データを取得するのを防ぐため。

2. 悪意のある Web サイトが他の Web サイトをiframe する際にデータを取得するのを防ぐため。

3. 悪意のある Web サイトが自分の Web サイト上で他の Web サイトにアクセスする権利を持ち、ログインや Cookie を介したデータの取得を回避しないようにするため。

3. クロスドメイン ソリューション

フロントエンドとバックエンドの両方に、クロスドメイン ソリューションが多数あります。ここでは主に私が知っている3つの解決策をコードとともに紹介します。

1. バックエンドでアクセスされるコードのメソッドに @CrossOrign の注釈を付けます。このアノテーションは spring-web のアノテーションであり、CORS 問題を解決するにはメソッドにアノテーションを追加するだけです。例えば：

/**
     * 获取用户信息
     * 
     * @return 用户信息
     */
    @GetMapping("getInfo")
    @CrossOrigin
    public AjaxResult getInfo()
    {
        SysUser user = SecurityUtils.getLoginUser().getUser();
        // 角色集合
        Set<String> roles = permissionService.getRolePermission(user);
        // 权限集合
        Set<String> permissions = permissionService.getMenuPermission(user);
        AjaxResult ajax = AjaxResult.success();
        ajax.put("user", user);
        ajax.put("roles", roles);
        ajax.put("permissions", permissions);
        return ajax;
    }

ただし、バックエンドにはアクセスされるメソッドが多数あるため、このアノテーションを各メソッドに追加することはできず、コードが冗長になります。したがって、2 番目の方法があります。CORS 問題を解決するためにフィルターを追加できます。コードは次のとおりです。

@Configuration
public class CORSFilter {
    @Bean
    public CorsFilter corsFilter(){
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.addAllowedMethod("*");
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**",corsConfiguration);
        return new CorsFilter(source);
    }
}

別の解決策があります。インターフェイスを実装してメソッドを書き直すことで、クロスドメインの問題を解決できます。コードは次のとおりです。

@Configuration
public class CORSConfiguration implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOriginPatterns("*")
                .allowedMethods("GET","POST","PUT","HEAD")
                .allowCredentials(true)
                .allowedHeaders("*")
                .maxAge(3600);
    }
}

これら 3 つの方法を通じて、CORS クロスドメイン問題を解決できます。