CORS 훑어보기

올바른생활부터 2024. 6. 27. 19:53

728x90

SMALL

목차

1. 문제 발생

2. 문제에 대한 정보 수집

3. 원인 추론

4. 문제 해결

1. 문제 발생

BE와 FE 프로젝트를 진행하는 과정에서 백엔드분들 배포해주신 숙박 전체 조회 API를 axios Get 요청을 했는데 밑에 처럼 CORS 문제가 발생하였다.

Access to fetch at 'http://ec2-xx-xxx-xx-xx.ap-northeast-2.compute.amazonaws.com/open-api/accommodation' from origin 'http://localhost:5173/' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

The FetchEvent for "http://ec2-xx-xxx-xx-xx.ap-northeast-2.compute.amazonaws.com/open-api/accommodation" resulted in a network error response: the promise was rejected.

에러 메시지를 해석하면 northeast-2.compute.amazonaws.com/open-api/accommodation'로의 가져오기 액세스가 CORS 정책에 의해 차단되었고, 요청된 리소스에 'Access-Control-Allow-Origin' 헤더가 없다.
즉, 클라이언트와 서버에 대한 URL의 출처가 달라서 CORS정책에 의해 차단되었다.

문제가 발생한 CORS 개념에 대해 먼저 알아보자.

CORS(Cross-Origin Resource Sharing)를 직역하면 "교차 출처 리소스 공유 정책"이라고 해석할 수 있는데, 여기서 교차 출처라고 하는 것은(엇갈린) 다른 출처를 의미하는 것이다. 즉, ‘출처가 교차한다’는 건 리소스를 주고받으려는 ‘두 출처가 서로 다르다’는 뜻이다. CORS를 설정한다는 건 ‘출처가 다른 서버 간의 리소스 공유’를 허용한다는 것이다.
출처(Origin)란? 우리가 어떤 사이트를 접속할때 인터넷 주소창에 우리는 URL이라는 문자열을 통해 접근하게 된다. 이처럼 URL은 https://domain.com:3000/user?query=name&page=1 과 같이 하나의 문자열 같지만, 사실은 다음과 같이 여러개의 구성 요소로 이루어져 있다.

📌
Protocol(Scheme) : http, https
Host : 사이트 도메인
Port : 포트 번호
Path : 사이트 내부 경로
Query string : 요청의 key와 value값
Fragment : 해시 태크

Origin: Protocol + Host + Port을 합친 것이다.
- 출처(Origin) 라는 것은 Protolcol 과 Host 그리고 Port 까지 모두 합친 URL을 의미한다고 보면 된다.

SOP(Same Origin Policy) 정책은 단어 그대로 동일한 출처에 대한 정책을 말한다. 그리고 이 SOP 정책은 '동일한 출처에서만 리소스를 공유할 수 있다.'라는 법률을 가지고 있다.즉, 동일 출처(Same-Origin) 서버에 있는 리소스는 자유롭게 가져올수 있지만, 다른 출처(Cross-Origin) 서버에 있는 이미지나 유튜브 영상 같은 리소스는 상호작용이 불가능하다는 것이다.

그렇다면 동일 출처가 아닌 경우 접근을 차단하는 이유는 뭘까? 출처가 다른 두 어플리케이션이 자유롭게 소통할 수 있는 환경은 꽤 위험한 환경이다. 만일 제약이 없다면, 해커가 CSRF(Cross-Site Request Forgery)나 XSS(Cross-Site Scripting) 등의 방법을 이용해서 우리가 만든 어플리케이션에서 해커가 심어놓은 코드가 실행하여 개인 정보를 가로챌 수 있다.

SOP와 CORS 두개의 출처의 다름 유무를 판단하는 기준이 무엇인지 알아보자.

출처(Origin)의 동일함은 두 URL의 구성 요소 중 Protocol(Scheme), Host, Port 이 3가지만 동일하다면 동일 출처로 판단한다. 반대로 프로토콜, 호스트, 포트 중 하나라도 자신의 출처와 다를경우 브라우저는 정책상 차단하게 된다.

이처럼 출처 비교와 차단은 브라우저에서 담당한다.

현재 CORS 발생한 문제는 클라이언트(프론트엔드)와 서버(백엔드)의 출처가 다르기 때문에 발생하는 문제이다. 예를들면 클라이언트는 http://localhost:5173에서 실행되고, 서버는 http://ec2-XX-XXX-XX-XX.ap-northeast-2.compute.amazonaws.com에서 실행된다. 브라우저는 이를 다른 출처로 인식하고 CORS 정책을 적용해서 CORS에러가 발생한 것이다.

결국 CORS 해결책은 서버의 허용이 필요하는 것이다. 서버에서 Access-Control-Allow-Origin 헤더에 허용할 출처를 기재해서 클라이언트에 응답하면 되는 것이었다.
백엔드 개발자가 다음과 같은 방법으로 서버의 CORS 설정을 수정 해야한다.
- Access-Control-Allow-Origin 헤더 추가: 응답 헤더에 Access-Control-Allow-Origin을 추가하고, 허용할 출처를 지정할 수 있다.

Access-Control-Allow-Origin: <http://localhost:5173>

728x90

LIST