꿈꾸는 새벽하늘

CORS(Cross-Origin Resource Sharing) 본문

🌿 Spring & Spring Boot

CORS(Cross-Origin Resource Sharing)

rovemin 2023. 10. 6. 01:07

이 에러는 제가 개발하다가 직접 마주쳤던 에러입니다. 프론트엔드와 백엔드가 협업하여 개발하다보면 이런 에러가 발생되는 경우가 있습니다. 에러를 보면 blocked by CORS policy라고 설명되어 있는데요, 이것이 바로 CORS 에러입니다.

1. CORS

CORS는 Cross-Origin Resource Sharing의 약자입니다. 이는 교차 출처 리소스 공유라고 번역할 수 있고, 다른 출처의 리소스를 공유하는 방법이라는 의미입니다. 이러한 CORS 정책을 위반할 때 CORS 에러가 발생하게 됩니다.

CORS에 대한 이해를 높이기 위해 URL의 구조부터 차근차근 살펴보겠습니다.

2. URL 구조

URL은 다음과 같이 protocol, host, port, path, parameter, 그리고 fragment로 이루어져 있습니다.

프로토콜은 http 또는 https가 될 수 있습니다. http는 80번 포트를, https는 443번 포트를 사용합니다. 그리고 80번과 443번 포트는 생략이 가능하다는 특징이 있습니다.

Origin(출처)

출처는 URL 구조의 protocol, host, port를 합친 것입니다.

따라서 앞서 주어진 URL의 출처는 https://efub-seminar.com:443 입니다.

같은 출처 vs 다른 출처

현재 웹페이지 주소가 https://efub-seminar.com/back 이라고 가정하고 출처를  비교하며 같은 출처인지 다른 출처인지 살펴보겠습니다.

3. SOP(동일 출처 정책)

SOP는 Same-Origin Policy의 약자입니다. SOP는 다른 출처로 요청을 보낼 수 없도록 금지하는 브라우저의 기본적인 보안 정책입니다. 즉, SOP는 동일한 출처로만 요청을 보낼 수 있게 합니다.

 

SOP를 준수하면 외부 리소스를 가져오지 못해서 불편하지만, XSS나 XSRF 등의 보안 취약점을 노린 공격을 방어할 수 있다는 장점이 있습니다.

 

그러나 현실적으로 외부 리소스를 참고하는 것이 필요하기 때문에 외부 리소스를 가져올 수 있는 방법은 반드시 필요합니다. 이에 따라 외부 리소스를 사용하기 위한 SOP의 예외 조항이 만들어졌고, 이것이 바로 CORS입니다.

4. CORS 동작 원리

Simple Request

Simple Request는 서버에게 바로 요청을 보내는 방법입니다.

Simple Request는 서버에 API를 요청하고, 서버는 Access-Control-Allow-Origin 헤더를 포함한 응답을 브라우저에 보냅니다. 이후 브라우저는 Access-Control-Allow-Origin 헤더를 확인해서 CORS 동작을 수행할지 판단합니다.

Preflight Request

Preflight Request는 서버에 예비 요청을 보내서 안전한지 판단한 후 본 요청을 보내는 방법입니다.

GET, POST, PUT, DELETE 등의 메서드로 API를 요청했는데 크롬 개발자 도구의 네트워크 탭에 OPTIONS 메서드로 요청이 보내지는 것을 보신 적이 있으시다면 CORS를 경험하셨던 것입니다.

Preflight Request는 실제 리소스를 요청하기 전에 OPTIONS라는 메서드를 통해 실제 요청을 전송할지 판단합니다. OPTIONS 메서드로 서버에 예비 요청을 먼저 보내고, 서버는 이 예비 요청에 대한 응답으로 Access-Control-Allow-Origin 헤더를 포함한 응답을 브라우저에 보냅니다. 이후 브라우저는 Simple Request와 동일하게 Access-Control-Allow-Origin 헤더를 확인해서 CORS 동작을 수행할지 판단합니다.

5. CORS 에러 해결 방법

CORS 동작 원리에 따라 서버에서 Access-Control-Allow-Origin 헤더를 포함한 응답을 브라우저에 보내는 방식으로 CORS 에러를 해결할 수 있습니다. 프론트엔드 개발자가 CORS 에러를 확인했다면, 서버에 Access-Control-Allow-Origin 등 CORS를 해결하기 위한 몇 가지 응답 헤더를 포함해달라고 요청해야 합니다.

저는 이전 프로젝트에서 configuration이라는 폴더 안에 CORSConfig.java 파일을 추가하여 CORS 에러를 해결했습니다. 코드를 자세히 보면 config.addAllowedOrigin 안에 https://www.time-table-artist.com 과 http://localhost:3000 이라는 주소가 들어있는 코드를 확인할 수 있습니다. 이와 같이 허용하는 출처를 설정하여 CORS 에러를 해결할 수 있습니다.

 

 

 

참고

저작자표시