cors (Cross Origin Resource Sharing) 오류

CORS?

(Cross Origin Resource Sharing)

cors는 한 도메인 또는 Origin의 웹페이지가 다른 도메인을 가진 (도메인간의 요청)에 액세스 할 수 있게하는 보안 메커니즘

cors는 최신브라우저에서 구현된 동일 출처 정책 때문에 등장했다.

※동일 출처 정책이란 동일한 출처의 리소스에만 접근하도록 제한하는 것이다. 출처는 (프로토콜, 호스트명, 포트가 같다는것을 의미)

 

간단하게 다른 출처의 자원을 공유할 수 있도록 설정하는 권한체제

제대로 설정하지 않을경우 다음과 같은 에러 화면을 볼수있음 

 

그렇다면 왜 동일한 출처에서만 접근하도록 허용하는 것일까?!

https://bank.com 이라는 도메인 사이트가 있다고 예를 들어보자

이 사이트의 api 주소는 https://bank.com/api이다. 사용자가 은행 사이트에서 로그인을 한 후 인증 토큰을 받았다.

그런데 사용자가 로그인한 상태에서 https://2bankll2.com사이트에 접속하게 되면, https://2bankll2,com사이트에서 https://bank.com/api로 ajax 요청을 보낼 때 유저가 획득한 인증 토큰이 자동으로 첨부되어 사용자인척하면서 요청을 보낼 수 있게 된다.

이렇게 자동으로 쿠키가 첨부되기 때문에 보안상의 이유로 브라우저는 HTTP 호출을 동일한 출처로 제한했다.

 

 

CORS가 필요한 이유

이전에는 동일한 도메인에서 리소스를 받아왔는데, 지금은 클라이언트에서 도메인이 다른 서버에서 제공하는 API를 사용하는 일이 많아졌다. 그래서 이전처럼 동일한 도메인간의 요청만 할 수 없어졌고 CORS가 생겼다.

 

CORS에러 해결 방법

나는 이번에 iframe으로 다른 도메인을 가져올경우 문제가 생겼었다..

스프링에서 CORS 해결법

 

 1. @CrossOrign 어노테이션 사용

     @CrossOrign 어노테이션은 어노테이션이 달린 메소드 또는 타입의 교차 출처를 허용하는 것으로 표시한다.

@CrossOrigin(origin="*", allowedHeaders = "*")
@Controller
public class MainController {
	@GetMapping(path = "/")
	public String main(Model model) {
		return "main";
	}
}

2. WebMvcConfigurer 사용

@Configuration 
public class WebConfig implements WebMvcConfigurer { 
  @Override 
  public void addCorsMappings(CorsRegistry registry) { 
    registry
      .addMapping("/**") // 프로그램에서 제공하는 URL 
      .allowedOrigins("*") // 청을 허용할 출처를 명시, 전체 허용 (가능하다면 목록을 작성한다. 
      .allowedHeaders("*") // 어떤 헤더들을 허용할 것인지 
      .allowedMethods("*") // 어떤 메서드를 허용할 것인지 (GET, POST...) 
      .allowCredentials(false) // 쿠키 요청을 허용한다(다른 도메인 서버에 인증하는 경우에만 사용해야하며, true 설정시 보안상 이슈가 발생할 수 있다) 
      // .maxAge(1500) // preflight 요청에 대한 응답을 브라우저에서 캐싱하는 시간 
  } 
}

2-2) 

 @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                	.allowedOrigins("https://~.com", 
                			"https://~2.com"
                );
            }
        };
    }

 

해결법 정리 참고

https://dev-pengun.tistory.com/entry/Spring-Boot-CORS-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0#toc-Configuration%EC%9C%BC%EB%A1%9C%20%ED%95%B4%EA%B2%B0%ED%95%98%EA%B8%B0