CORS 알아보기

Access to fetch at 'https://api-server.com/data' from origin 'https://my-service.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

1. CORS란?

CORS(Cross-Origin Resource Sharing):
한 출처에서 다른 출처의 리소스에 접근할 수 있도록 허용하는 브라우저의 보안정책이다.

• 예를 들면 (https://my-service.com)에서 (https://my-api.com)에 있는 리소스(API, 데이터, 폰트 등)를 요청할 수 있도록 허용하거나 차단하는 규칙을 정의하는 것을 말한다.

CORS를 이해하기 위해선 SOP를 알아야 한다.

2. SOP(Same-Origin Policy)

SOP는 동일 출처 정책으로 악의적인 스크립트가 다른 웹사이트에 접근하는 것을 막는 정책이다.
출처란 Protocol(http, https), Host/Domain(my-service.com), Port(80, 443)의 조합으로 하나 이상 다르면 다른 출처로 간주

• 예를 들면 (아까와 같은 예로, (https://my-service.com)에서 (https://my-api.com)에 있는 리소스를 접근할 때, 다른 출처이기 때문에 SOP 정책 위반으로 차단한다.

이때, 예외를 만들어 안전하게 허용을 해줄 수 있는 것이 CORS이다.
서버에서 다른 출처에서 리소스 접근해도 돼(교차 출처 리소스 공유)를 허락하면 리소스를 이용할 수 있다.

3. CORS 방법

만약 Content-Type이 application/json이거나, PUT, DELETE 메소드를 사용하려면 예비요청을 보내는 방법이있다.

• Preflight Requests
  Client/Browser는 먼저 OPTIONS 메소드로 예비 요청을 보낸다.

  METHOD: OPTIONS
  Origin: <출처>
  Access-Control-Request-Method: <GET,POST,PUT,DELETE ...>
  Access-Control-Request-Headers: <CUSTOM_HEADER, ex) authorization>	

  Server는 요청의 출처 메소드 헤더를 허용하는지 판단하여 허용한다면

  200 OK
  Access-Control-Allow-Origin: <출처>
  Access-Control-Allow-Methods: <GET,POST,PUT,DELETE, ...>
  Access-Control-Allow-Headers: <Header, ex) Content-Type, Authorization>
  Access-Control-Max-Age: <Preflight_cache_time>

결론

CORS는 웹의 개방성을 유지하면서도 보안을 지키기 위한 중요한 정책이다. 서버 측에서 올바른 CORS 헤더를 설정하며, 요청할 때 올바르게 요청하여 이용한다.