[Spring] CORS와 SOP의 의미, @CrossOrigin와 WebMvcConfigurer 코드 예시

 

 

 

프론트와 백엔드를
따로 작성할 때,
@CrossOrigin을 붙였다.

 

 

 

 

@CrossOrigin

• CORS를 스프링을 통해 설정할 수 있는 기능이다.
• 모든 도메인과 모든 요청방식에 대해 하용한다는 의미를 가진다.
• 스프링 4.2부터 지원한다.

 

 

CORS

• 서로 다른 도메인에서 리소스를 공유하는 방식
• 웹 페이지의 제한된 자원을 외부 도메인에서 접근을 허용해주는 매커니즘
• 처음 전송되는 리소스의 도메인과 다른 도메인으로부터 리소스가 요청될 경우 해당 리소스는 cross-origin HTTP 요청한다.
• Same Origin Policy와 반대되는 개념
• 예시로, 다른 집에서 내 집에 있는 금고(데이터)를 사용할 수 있도록 집주인(서버)이 허가증(특정 응답 헤더)을 써주면 가능하다.

 

 

 

SOP

• Same Origin Policy의 약자이며 동일한 출처의 Origin만 리소스(데이터)를 공유할 수 있다.
• 만약 동일한 출처가 아니라면 OPTIONS를 이용한 Preflight를 이용하여 여러 검증을 거친다.
• 예시로, 우리 집(오리진)에 들어와야 집에 있는 금고(데이터)를 열 수 있다.

 

 

 

---

 

 

 

 

@CrossOrigin 코드 예시

vue코드

const res = await axios.post("http://localhost:8080/api/register", {
          name: this.name,
          userId: this.userId,
          pwd: this.pwd,
          pwdConfirm: this.pwdConfirm,
          tel: this.tel,
          birth: this.birth,
          email: this.email,
        });

spring 코드 - 클래스 단위

@RestController
@RequestMapping("/api")
@CrossOrigin(origins = "http://localhost:5173")
public class RegisterController {

...

}

spring 코드 - 메서드 단위

    @CrossOrigin(origins = "http://localhost:5173")
    @PostMapping("/register")
    public ResponseEntity<String> register(@RequestBody RegisterRequest request) {
    
    ...
  
    }

프론트는 http://localhost:5173를 가지고 있고, 백엔드는 http://localhost:8080를 가지고 있다. 이런 경우 포트가 다르기 때문에 서로 다른 오리진으로 간주된다. 그래서 이를 예외적으로 허용하기 위해 CORS를 쓴다. @CrossOrigin은 SpringMVC에서 CORS 허용 헤더를 자동으로 달아주는 역할을 한다. 아주 간단하게 컨트롤러에서 해결할 수 있다.

현재 코드에서는 클래스에 @CrossOrigin을 붙였다. 이렇게 해도 되지만, 메서드 단위로 적용시킬수도 있다. 그리고  exposedHeaders, allowCredentials 등 다양한 속성이 있어서 더 구체적으로 지정할 수 있다.

 

 

 

 

 

---

 

 

 

 

다른방법_ WebMvcConfigurer 코드 예시

@Configuration
public class CorsConfig implements WebMvcConfigurer {

  @Override
  public void addCorsMappings(CorsRegistry registry) {
    registry.addMapping("/api/**")
        // 허용할 오리진 목록
        .allowedOrigins("http://localhost:5173")
        // 허용할 HTTP 메서드
        .allowedMethods("GET","POST","PUT","DELETE","OPTIONS")
        // 요청 헤더 허용
        .allowedHeaders("*")
        // 프런트에서 읽을 수 있게 노출할 응답 헤더
        .exposedHeaders("Location")
        // 크로스 사이트 쿠키/세선 전송 허용
        .allowCredentials(true)  
        // Preflight(OPTIONS) 결과 캐시
        .maxAge(3600);
  }
}

출처 - https://wonit.tistory.com/572

// 스프링 부트 앱의 시작점
@SpringBootApplication
public class RestServiceCorsApplication {

    public static void main(String[] args) {
        SpringApplication.run(RestServiceCorsApplication.class, args);
    }

    // 빈 등록
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            // 전역 CORS 추가
            public void addCorsMappings(CorsRegistry registry) {
                // 모든 엔트포인트에 대해 CORS 적용, fornt-server에서 오는 요청만 허용
                registry.addMapping("/**").allowedOrigins("http://front-server.com");
            }
        };
    }

}

@CrossOrigin은 간단하게 설정할 수 있지만 컨트롤러의 수가 많고 그 안에 속성도 많다면 매번 적어야하는 번거로움이 있을 것이다. 그래서 이런 경우는 전역적으로 설정하는게 좋다. 아마 실제 서버를 운영한다면 전역적으로 설정하는 방식이 더 맞지 않을까 싶다.

첫번째 코드는 아예 CORS의 전역 설정을 위한 클래스를 따로 만들었다. 여러 속성을 포함시켜 메서드, 헤더, 쿠키 등을 지정하여 값을 세팅해줬다. 두번째 코드는 main 함수에 Bean으로 Configurer를 추가했다. 속성을 따로 설정하지 않아 기본값으로 세팅된다.

 

 

 

 

---

 

 

 

아래에 출처를 남겨두겠습니다.
블로그엔 제가 최대한 이해한 내용까지만 적는거라
출처에 들어가시면 더 많은 내용이 있어 공부하시는데 도움되실겁니다.

 

🪽

틀린 내용이 있다면 댓글로 알려주세요

 

 

---

 

- CrossOrigin

REST API CrossOrigin Annotation 간단 정리

 

 

 

- CORS

[Spring Boot] CORS 를 해결하는 3가지 방법 (Filter, @CrossOrigin, WebMvcConfigurer)

 

 

 

- Preflight

[HTTP] OPTIONS 헤더와 Preflight 그리고 CORS