Spring Boot: So lösen Sie Cross-Origin-Probleme

Beschreibung des Cross-Origin-Problems

Möglicherweise wird die folgende Fehlermeldung angezeigt:

wurde durch die CORS-Richtlinie blockiert: Auf der angeforderten Ressource ist kein „Access-Control-Allow-Origin“-Header vorhanden

Dieser Fehler weist darauf hin, dass eine Anfrage an eine bestimmte Adresse vom CORS-Protokoll blockiert wurde, weil der Access-Control-Allow-Origin-Header in der Ressource fehlt.

Analyse ursprungsübergreifender Probleme

Die Hauptursache für Cross-Origin-Probleme liegt darin, dass Browser aus Sicherheitsgründen den Zugriff auf Ressourcen außerhalb der aktuellen Site einschränken.

Stellen Sie sich zum Beispiel eine Website vor, die unter http://127.0.0.1:8080/ mit einer bestimmten Seite gehostet wird. Wenn Sie von derselben Site aus auf Ressourcen zugreifen, gibt es keine Einschränkungen. Wenn Sie jedoch versuchen, von einer anderen Site aus auf Ressourcen zuzugreifen (z. B. http://127.0.0.1:8081), blockiert der Browser die Anfrage.

Hinweis: Wir betrachten Protokoll, Domäne und Port als Teil der Definition eines „gleichen Ursprungs“.

Elemente mit einem src-Attribut, wie img- und script-Tags, unterliegen dieser Einschränkung nicht.

In der Vergangenheit, als Front-End und Back-End nicht getrennt waren, existierten Seiten und Anforderungsschnittstellen unter derselben Domäne und demselben Port. Browser würden dann Anfragen von einer Seite, die in einer Domain gehostet wird, erlauben, Ressourcen von derselben Domain anzufordern.

Zum Beispiel kann http://127.0.0.1:8080/index.html http://127.0.0.1:8080/a/b/c/userLit frei anfordern.

Heutzutage, da Front-End und Back-End in verschiedene Anwendungen getrennt sind, ist dies nicht zulässig und führt zu CORS-Problemen.

Was ist Origin und Cross-Origin?

Ursprung (oder Quelle) besteht aus dem Protokoll, der Domäne und der Portnummer.

Eine URL besteht aus Protokoll, Domäne, Port und Pfad. Zwei URLs gelten als „gleicher Ursprung“, wenn ihr Protokoll, ihre Domäne und ihr Port alle identisch sind. Jeder Unterschied in einem dieser drei Elemente stellt eine herkunftsübergreifende Anfrage dar.

Erwägen Sie herkunftsübergreifende Vergleiche für 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

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

同一オリジン ポリシーは、ブラウザの基本的なセキュリティ機能です。これがないと、ブラウザの通常の機能が危険にさらされる可能性があります。 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
    }
}

Das obige ist der detaillierte Inhalt vonSpring Boot: So lösen Sie Cross-Origin-Probleme. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!