교차 출처 문제 설명

다음 오류 메시지가 나타날 수 있습니다.

CORS 정책에 의해 차단되었습니다. 요청한 리소스에 'Access-Control-Allow-Origin' 헤더가 없습니다.

이 오류는 Access-Control-Allow-Origin 헤더가 리소스에 없기 때문에 특정 주소에 대한 요청이 CORS 프로토콜에 의해 차단되었음을 나타냅니다.

교차 출처 문제 분석

교차 출처 문제의 근본 원인은 브라우저가 보안상의 이유로 현재 사이트 외부의 리소스에 대한 액세스를 제한한다는 것입니다.

예를 들어, 특정 페이지가 있는 http://127.0.0.1:8080/에 호스팅된 웹사이트를 생각해 보세요. 동일한 사이트의 리소스에 액세스하는 경우 제한이 없습니다. 하지만 다른 사이트(예: http://127.0.0.1:8081)의 리소스에 액세스하려고 하면 브라우저가 요청을 차단합니다.

참고: 프로토콜, 도메인, 포트는 "동일 출처" 정의의 일부로 간주됩니다.

img 및 script 태그와 같은 src 속성이 있는 요소에는 이 제한이 적용되지 않습니다.

역사적으로 프런트엔드와 백엔드가 분리되지 않았을 때에는 페이지와 요청 인터페이스가 동일한 도메인과 포트에 존재했습니다. 그러면 브라우저는 한 도메인에서 호스팅되는 페이지의 요청을 허용하여 동일한 도메인의 리소스를 요청할 수 있습니다.

예를 들어 http://127.0.0.1:8080/index.html은 http://127.0.0.1:8080/a/b/c/userLit를 자유롭게 요청할 수 있습니다.

요즘에는 프런트엔드와 백엔드가 서로 다른 애플리케이션으로 분리되어 있으므로 이는 허용되지 않으며 CORS 문제를 유발합니다.

오리진(Origin)과 크로스 오리진(Cross-Origin)이란 무엇입니까?

원본(또는 소스)은 프로토콜, 도메인, 포트 번호로 구성됩니다.

URL은 프로토콜, 도메인, 포트, 경로로 구성됩니다. 프로토콜, 도메인, 포트가 모두 동일한 경우 두 URL은 "동일 출처"로 간주됩니다. 이 세 가지 요소 중 하나라도 차이가 있으면 교차 출처 요청이 됩니다.

https://www.baidu.com/index.html:

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

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

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

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
    }
}