[Networt] 36. CORS, preflight는 무엇인가요?

[leejohy-0223]

36. CORS, preflight는 무엇인가요?

키워드

CORS, SOP

[leejohy-0223]

CORS를 알아보기에 앞서, 먼저 SOP에 대해서 알아봅시다.

1. SOP(Same-Origin Policy)란?

Origin이란, 아래와 같은 URL 구조에서 Protocol, Host, Port에 해당하는 부분을 의미합니다. 즉 Same-Origin은 이 3가지가 동일한 상태를 의미하며, 같은 Origin을 가진 요청에 대해 정상적인 응답이 허용된다는 정책입니다.

2. CORS란?

Cross-Origin Resource Sharing의 약자이며, 교차 Origin(다른 Origin) 간 리소스 공유라는 의미를 가지고 있습니다. 앞서 살펴본 SOP로 인해 다른 출처 간 이동은 기본적으로 불가능합니다. 하지만 웹에서 다른 출처로의 이동은 빈번하기에 이를 허용하고자 몇 가지 예외적인 허용을 두었는데, 이 중 하나가 CORS 정책을 지킨 리소스 요청입니다. (참고로 CORS가 SOP의 등장보다 빠릅니다.)

즉 우리가 다른 출처로 리소스를 요청한다면 SOP 정책을 위반한 것이고, 예외조항인 CORS까지 지키지 않는다면 아예 다른 출처의 리소스를 사용할 수 없게 되는 것입니다.

3. CORS의 동작

1. 기본적으로 브라우저는 다른 출처의 리소스 요청 시 요청 헤더에 Origin Field를 통해 요청을 보내는 출처를 담아 보냅니다.
   Origin: https://www.service.com

2. 이후 서버가 응답을 할 때 응답 헤더의 Access-Control-Allow-Origin 필드에 이 리소스를 접근하는 것이 허용된 출처를 내려주고, 응답을 받은 브라우저는 자신이 보낸 요청의 Origin과 서버가 보낸 필드를 비교한 후 이 응답이 유효한지를 결정합니다.

4. CORS의 시나리오

1. Preflight : 브라우저에서 요청을 보낼 때 두 번에 나눠 요청을 보내는 방식입니다. 즉 첫 번째 요청에서는 OPTION 메서드를 보내고 응답 헤더의 Access-Control-Allow-Origin를 확인하여, 안전한 요청인지 확인합니다. 이와 같이 보내는 첫 번째 요청을 Preflight request라고 합니다.

2. Simple Request : 일단 요청을 바로 보낸 후 Access-Control-Allow-Origin를 확인하는 방식입니다. 부가적인 조건(HTTP 메서드 제한, 특정 헤더 외에는 허용 안됨 등)이 필요하여 잘 사용되지 않습니다.

5. Spring에서의 Solution

결국 Access-Control-Allow-Origin에 허용할 origin을 붙여주면 됩니다.

1. @crossorigin 어노테이션을 컨트롤러에 붙여 요청을 허용할 출처를 적어줍니다.
2. WebMvcConfigurer에서 설정합니다. 1처럼 중복되는 경우가 많으면 이처럼 한꺼번에 처리하는게 간편합니다.
3. 프록시 서버를 통한 요청을 사용합니다.

출처

https://evan-moon.github.io/2020/05/21/about-cors