Cross-Origin-Problembeschreibung

Möglicherweise wird die folgende Fehlermeldung angezeigt:

wurde durch 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 Ursprung 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 Cross-Origin-Anfrage dar.

Erwägen Sie ursprungsübergreifende Vergleiche für https://www.baidu.com/index.html:

Was ist die Same-Origin-Richtlinie?

Die Same-Origin-Richtlinie ist eine grundlegende Browser-Sicherheitsfunktion. Ohne sie könnte die normale Funktionalität von Browsern gefährdet sein. Die Webarchitektur hängt stark von dieser Richtlinie ab und Browser implementieren sie, um die Sicherheit zu gewährleisten.

Die Same-Origin-Richtlinie umfasst:

1. DOM-Same-Origin-Richtlinie: Verhindert die DOM-Manipulation verschiedener Ursprungsseiten. Gilt hauptsächlich für Cross-Origin-Iframe-Szenarien, in denen die Iframes verschiedener Domänen nicht aufeinander zugreifen können.
2. XMLHttpRequest Same-Origin Policy: Verbietet HTTP-Anfragen an unterschiedliche Ursprünge mithilfe von XHR-Objekten.

Cross-Origin-Probleme in Spring Boot lösen

1. Erstellen eines Filters zur Behandlung von CORS

In einem Projekt, bei dem Front-End und Back-End getrennt bereitgestellt werden, ist die Bewältigung von CORS von entscheidender Bedeutung. Cookies werden zum Speichern von Benutzeranmeldeinformationen verwendet und Spring-Interceptors verwalten Berechtigungen. Probleme treten auf, wenn der Interceptor und CORS in der falschen Reihenfolge verarbeitet werden, was zu einem CORS-Fehler führt.

Eine HTTP-Anfrage durchläuft zunächst den Filter, bevor sie das Servlet und dann den Interceptor erreicht. Um sicherzustellen, dass die CORS-Verarbeitung vor dem Abfangen der Autorisierung erfolgt, können wir die CORS-Konfiguration in einen Filter einfügen.

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

Während JSONP ursprungsübergreifende Probleme im Front-End beheben kann, unterstützt es nur GET-Anfragen, was in RESTful-Anwendungen eine Einschränkung darstellt. Stattdessen können Sie ursprungsübergreifende Anfragen mit Cross-Origin Resource Sharing (CORS) im Back-End bearbeiten. Diese Lösung gibt es nicht nur bei Spring Boot, sondern wurde auch in herkömmlichen SSM-Frameworks verwendet. Sie konfigurieren es, indem Sie die WebMvcConfigurer-Schnittstelle implementieren und die addCorsMappings-Methode überschreiben.

@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. Konfigurieren von CORS im Controller

Sie können CORS für bestimmte Controller-Methoden aktivieren, indem Sie die Annotation @CrossOrigin zur Annotation @RequestMapping hinzufügen. Standardmäßig lässt @CrossOrigin alle in @RequestMapping angegebenen Ursprünge und HTTP-Methoden zu.

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

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

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

Verstehen von @CrossOrigin-Parametern:

• @CrossOrigin ohne Parameter ermöglicht den Zugriff auf alle URLs.
• @CrossOrigin(origins = "http://127.0.0.1:8080") schränkt den Zugriff auf die angegebene URL ein.
• Diese Annotation kann für Klassen oder Methoden verwendet werden.
• Das Wert- oder Ursprungsattribut gibt zulässige URLs an.
• maxAge gibt das maximale Alter in Sekunden für den Preflight-Anforderungscache an.
• AllowCredentials gibt an, ob Anmeldeinformationen (Cookies) zulässig sind. Der Standardwert ist false.
• „allowedHeaders“ gibt zulässige Anforderungsheader an.
• Methoden geben zulässige Anforderungsmethoden an. Die Standardeinstellung ist GET, POST, HEAD.

Gründe, warum @CrossOrigin möglicherweise nicht funktioniert

1. Spring MVC-Version muss 4.2 oder höher sein, um @CrossOrigin zu unterstützen.
2. Falsche Anfragen können aufgrund einer falschen Serverantwort als Cross-Origin-Probleme erscheinen.
3. Wenn das Hinzufügen von @CrossOrigin über der Controller-Annotation immer noch zu Problemen führt, besteht eine mögliche Lösung darin, die HTTP-Methoden in @RequestMapping anzugeben.

Beispiel:

@CrossOrigin
@RestController
public class PersonController {

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