CORS ERROR와의 만남

노혁·2023년 6월 22일

Springboot cors

front-end와의 첫 api 통신중에 CORS Error를 만났습니다. 이 게시물을 통해 CORS가 무엇인지, 해결방법에는 무엇이 있는지 알아보겠습니다.

먼저 짚고 넘어가자

처음으로 짚고 넘어가야 하는것이 SOP(Same Origin Policy)라는 것이다.
SOP는 다른 출처의 리소스를 사용하는것에 제한하는 보안 방식

출처란?

Protocol + Host + Port 3가지를 통하여 같은 출처인지 다른 출처인지 확인이 가능하다.

동일 출처 예시

예시	설명
http://www.choice-time.com:80 http://www.choice-time.com	HTTP 기본 Port인 80번이 생략되어있으므로 동일 출처입니다
http://choice-time.com/post/1 http://choice-time.com/post/2	Protocol, Host, Port(생략)이 같으며, Path부터 다르므로 동일 출처입니다

다른 출처 예시

예시	설명
http://choice-time.com/post/1 https://choice-time.com/post/2	Protocol이 다릅니다
http://oasis-time.com http://www.choice-time.com	Host가 다릅니다
http://www.choice-time.com http://ww.choice-time.com:8080	80, 8080으로 포트가 다릅니다

같은 오리진 길이만 데이터를 송수신 하고자 한다 라는 것이 Same Origin Policy를 지키는 것이다.

💫 CORS란?

CORS(Cross-Origin Resource Sharing)는 한 출처에 있는 자원에서 다른 출처에 있는 자원에 접근하도록 하는 개념입니다. 직여하게 되면, 교차되는 출처 자원들의 공유입니다.

교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 다른 출처의 자원에 접근할 수 있는 권한을 브라우저에 알려 줍니다. 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행합니다.

왜 필요하지?

CORS 제한이 없다면 다른 사이트에서 원래 사이트를 모방하여 사용자 정보를 탈취하거나 해킹할 수 있습니다. 이를 방지하기 위해 브라우저는 보호 기능을 제공하며, 필요한 경우에만 서버와 협의하여 요청할 수 있도록 제한을 두어야 합니다.

어떻게 동작 하는지

단순 요청(Simple Request)인 경우

GET, HEAD, POST 요청만 가능합니다

브라우저는 자신의 주소 https://www.site.com를 origin에 담아서 요청을 보냅니다.
서버는 요청을 확인하고 다른 출처 주소 https://www.site.com에 접근이 가능하다는 access-control-allow-origin에 해당 주소를 담아서 결과를 리턴합니다.

특히, access-control-allow-origin는 CORS 헤더 요소 중 하나로 어떤 요청을 허용할지 결정합니다.
이 헤더 값은 하나의 출처가 될 수 있고, “*”를 사용해 어떤 출처도 허용하도록 할 수 있습니다.

서버가 CORS 헤더를 응답하지 않으면 Same-Origin Policy가 적용되어 요청이 차단됩니다.
서버가 "Access-Control-Allow-Origin" 헤더를 응답해야 하며, 이 헤더에 요청한 출처가 포함되어 있지 않으면 브라우저는 해당 요청을 차단합니다.

Preflight 요청일 경우

Preflight는 OPTIONS 메서드로 HTTP 요청을 미리 보내 실제 요청이 전송하기에 안전한지 확인합니다.

요청 헤더에는 다음 값이 존재합니다.

origin : 어디서 요청을 했는지 서버에 알려주는 주소

access-control-request-method : 실제 요청이 보낼 HTTP 메서드

access-control-request-headers : 실제 요청에 포함된 header

응답 헤더에는 다음 값이 존재합니다.

access-control-allow-origin : 서버가 허용하는 출처

access-control-allow-methods : 서버가 허용하는 HTTP 메서드 리스트

access-control-allow-headers : 서버가 허용하는 header 리스트

access-control-max-age : 프리 플라이트 요청의 응답을 캐시에 저장하는 시간

Origin헤더에 현재 요청하는 origin과, Access-control-request-method헤더에 요청하는 HTTP method와 Access-Control-Request-Headers 요청 시 사용할 헤더를 OPTIONS 메서드로 서버에 요청합니다. 이때 내용물은 없이 헤더만 전송합니다.

Browser가 서버에서 응답한 헤더를 보고 유요한 요청인지 확인합니다. 만약 유효하지 않은 요청이라면 요청은 중단되고 에러가 발생합니다. 유효한 요청이라면 원래 요청으로 보내려던 요청을 다시 요청하여 리소스를 응답받습니다.