Spring Boot: 교차 원본 문제를 해결하는 방법

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

동일 출처 정책이란 무엇입니까?

동일 출처 정책은 기본적인 브라우저 보안 기능입니다. 그렇지 않으면 브라우저의 정상적인 기능이 위험해질 수 있습니다. 웹 아키텍처는 이 정책에 크게 의존하며 브라우저는 보안을 보장하기 위해 이를 구현합니다.

동일 출처 정책에는 다음이 포함됩니다.

1. DOM 동일 출처 정책: 서로 다른 출처 페이지의 DOM 조작을 방지합니다. 서로 다른 도메인의 iframe이 서로 액세스할 수 없는 교차 출처 iframe 시나리오에 주로 적용됩니다.
2. XMLHttpRequest 동일 출처 정책: XHR 객체를 사용하여 다른 출처에 대한 HTTP 요청을 금지합니다.

Spring Boot의 교차 원본 문제 해결

1. CORS를 처리하기 위한 필터 만들기

프런트엔드와 백엔드가 별도로 배포되는 프로젝트에서는 CORS를 해결하는 것이 중요합니다. 쿠키는 사용자 로그인 정보를 저장하는 데 사용되며 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는 프런트엔드에서 교차 출처 문제를 해결할 수 있지만 RESTful 애플리케이션에서는 제한되는 GET 요청만 지원합니다. 대신 백엔드에서 CORS(Cross-Origin Resource Sharing)를 사용하여 원본 간 요청을 처리할 수 있습니다. 이 솔루션은 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 구성

@RequestMapping 주석에 @CrossOrigin 주석을 추가하여 특정 컨트롤러 메서드에 대해 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에 대한 액세스를 제한합니다.
• 이 주석은 클래스나 메소드에 사용할 수 있습니다.
• 값 또는 출처 속성은 허용되는 URL을 지정합니다.
• maxAge는 실행 전 요청 캐시의 최대 수명을 초 단위로 나타냅니다.
• AllowCredentials는 자격 증명(쿠키)이 허용되는지 여부를 나타냅니다. 기본값은 false입니다.
• allowedHeaders는 허용되는 요청 헤더를 지정합니다.
• 메소드는 허용되는 요청 메소드를 지정하며 기본값은 GET, POST, HEAD입니다.

@CrossOrigin이 작동하지 않는 이유

1. @CrossOrigin을 지원하려면 Spring MVC 버전이 4.2 이상이어야 합니다.
2. 잘못된 요청은 부적절한 서버 응답으로 인해 교차 출처 문제로 나타날 수 있습니다.
3. 컨트롤러 주석 위에 @CrossOrigin을 추가해도 여전히 문제가 발생하는 경우 가능한 해결 방법 중 하나는 @RequestMapping에 HTTP 메서드를 지정하는 것입니다.

예:

@CrossOrigin
@RestController
public class PersonController {

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

위 내용은 Spring Boot: 교차 원본 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!