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

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

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:

同一生成元ポリシーとは何ですか?

同一オリジン ポリシーは、ブラウザの基本的なセキュリティ機能です。これがないと、ブラウザの通常の機能が危険にさらされる可能性があります。 Web アーキテクチャはこのポリシーに大きく依存しており、ブラウザはセキュリティを確保するためにこのポリシーを実装しています。

同一生成元ポリシーには次のものが含まれます:

1. DOM Same-Origin Policy: 異なるオリジン ページの DOM 操作を防止します。主に、異なるドメインの iframe が相互にアクセスできないクロスオリジン iframe シナリオに適用されます。
2. XMLHttpRequest Same-Origin Policy: XHR オブジェクトを使用した異なるオリジンへの HTTP リクエストを禁止します。

Spring Boot でのクロスオリジンの問題の解決

1. CORS を処理するフィルターの作成

フロントエンドとバックエンドが別々にデプロイされているプロジェクトでは、CORS に対処することが重要です。 Cookie はユーザーのログイン情報を保存するために使用され、Spring インターセプターはアクセス許可を管理します。インターセプターと CORS が間違った順序で処理されると問題が発生し、CORS エラーが発生します。

HTTP リクエストは、サーブレットに到達する前にまずフィルターを通過し、次にインターセプターに到達します。認証インターセプトの前に CORS 処理が確実に行われるように、CORS 構成をフィルターに配置できます。

@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. WebMvcConfigurer での CORS の構成

JSONP はフロントエンドでクロスオリジンの問題に対処できますが、サポートされるのは GET リクエストのみであり、RESTful アプリケーションでは制限があります。代わりに、バックエンドで Cross-Origin Resource Sharing (CORS) を使用してクロスオリジン リクエストを処理できます。このソリューションは Spring Boot に固有のものではなく、従来の SSM フレームワークで使用されてきました。これを構成するには、WebMvcConfigurer インターフェイスを実装し、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. コントローラーでの CORS の構成

@CrossOrigin アノテーションを @RequestMapping アノテーションに追加することで、特定のコントローラー メソッドに対して CORS を有効にできます。デフォルトでは、@CrossOrigin は @RequestMapping.
で指定されたすべてのオリジンと HTTP メソッドを許可します。

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

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

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

@CrossOrigin パラメータについて：

• パラメーターなしの @CrossOrigin は、すべての URL へのアクセスを許可します。
• @CrossOrigin(origins = "http://127.0.0.1:8080") は、指定された URL へのアクセスを制限します。
• このアノテーションはクラスまたはメソッドで使用できます。
• value またはorigins 属性は、許可される URL を指定します。
• maxAge は、プリフライト リクエスト キャッシュの最大存続期間を秒単位で示します。
• allowCredentials は、資格情報 (Cookie) が許可されるかどうかを示します。デフォルトは false です。
• allowedHeaders は、許可されるリクエスト ヘッダーを指定します。
• Methods は許可されるリクエスト メソッドを指定します。デフォルトは GET、POST、HEAD です。

@CrossOrigin が機能しない理由

1. @CrossOrigin をサポートするには、Spring MVC バージョンが 4.2 以降である必要があります。
2. サーバーの応答が不適切なため、不正なリクエストがクロスオリジンの問題として表示される場合があります。
3. コントローラー アノテーションの上に @CrossOrigin を追加しても問題が発生する場合、考えられる解決策の 1 つは @RequestMapping で HTTP メソッドを指定することです。

例：

@CrossOrigin
@RestController
public class PersonController {

    @RequestMapping(method = RequestMethod.GET)
    public String add() {
        // some code
    }
}