CORS

 

면접을 보면서 CORS에 대한 질문을 받았었다. CORS에 대해 아는 대로 답변드리고 꼬리 질문이 이어졌는데, CORS를 제대로 답변드리지 못한 것 같기도 하고 프론트엔드에선 어떻게 설정하는지에 대한 질문에 답변을 하지 못해 다시 간단하게 정리하고자 한다.

 

CORS

 

CORS는 cross origin resource share의 약자로 origin간origin 간 리소스를 공유할 수 있도록 하는 정책이다. 브라우저는 보통 다른 origin에서 요청을 보내는 것을 금지하고, 같은 origin 간 공유를 허용하는 정책을 사용한다.

 

여기서 말하는 같은 origin이 SOP(same-origin-policy)이다.

 

Open API 등 다른 출처(origin)에 자원을 요청하는 경우가 많아졌다. 다른 origin의 요청을 허용하기 위해 서버에서 허용한 origin과 헤더의 origin을 비교해 검사하는 것이 CORS의 핵심 원리이다.

 

origin

 

origin은 출처로 Protocol, Host, 포트 번호를 합친 것을 의미하고, 같은 origin은 위 3개가 모두 동일한 것을 말한다.

 

 

클라이언트에서 서버로 요청을 보내게 되면 헤더에 origin이 담겨 보내진다. 서버는 'Access-Control-Allow-Origin' 속성을 추가해 응답을 내려주는데, 이때 내려준 값과 헤더의 origin을 비교해 동일한 출처인지, 허용된 출처인지를 비교한다.

 

허용되지 않은 출처인 경우 수행을 거부하게 된다.

 

CORS의 종류로 simple, non-simple 두 종류가 있다.

 

simple CORS

 

요청에 특정 헤더만 포함하고(다른 헤더는 허용하지 않는다) HTTP 메소드가 GET, HEAD, POST일 때만 가능하다.

 

• Accept
• Accept-Language
• Content-Language
• Content-Type(아래 3가지 경우에 한해서)
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text
• DPR
• Downlink
• Save-Data
• Viewport-Width
• Width

 

simple은 말 그대로 origin 요청을 한 번만 수행한다.

 

non-simple CORS

 

preflight 라는 사전 요청을 보내, 우선 도메인이 안전한지 확인한 후 본 요청을 주고받는다.

 

 

preflight 요청 헤더는 Access-Control-Request-Method와 Access-Control-Request-Headers라는 속성이 포함되어 있다. 각 속성값으로 요청을 보낼 때 사용한 메서드와 헤더 속성을 갖는다.

 

안전한 origin인지 확인하기 위해 요청 헤더의 Access-Control-Request-* 값을 응답 헤더가 가진 Access-Control-Allow-* 값과 비교한다. 비교 후 허용되지 않은 메서드나 헤더 속성이 발견될 경우 허용되지 않은 origin으로 간주하고 수행을 거부한다. preflight 요청에 성공한 후에는 simple 유형의 요청과 동일하게 origin 검사를 한다.

 

CORS 적용

 

express로 서버를 구축하는 경우 'Access-Control-Allow-Origin'을 통해 허용할 origin을 설정하거나, CORS 라이브러리를 활용한다.

 

프론트엔드에서 적용하는 방법?

 

Proxy Server를 도입하는 것이다. Proxy를 도입하지 않은 경우 자원을 요청할 때마다 허용할 origin을 작성해야 하는데, 개발 단계에서는 localhost 주소를 배포 단계에서는 실제 도메인을 작성해야 한다.

 

개발, 배포 단계마다 수작업으로 작성하는 일은 번거롭고 안전하지 않다.

 

프론트엔드에서 백엔드로 전송되는 중간에 Proxy Server를 두어 Origin(출처)를 동일하게 적용하여 백엔드로 요청을 보내 CORS를 실현할 수 있다.

 

출처

 

찬미니즘

CORS 에러와 해결법

 

[프론트엔드] CORS의 유래 및 특징, 활용

CORS 에러와 해결법