CORS 개념 & 해결법

CORS 에러발생

프로젝트를 진행하던 도중에 firebase API를 호출하고 나서 "has been blocked by cors policy"라는 에러가 떴다.

오늘은 CORS가 무엇이고 에러를 어떻게 처리해야하는지 알아보기로 했다.

---

1. CORS의 배경

웹 초기에는 웹사이트가 단순했고 프론트엔드와 백엔드가 분리되어 있지 않았다.
=> 즉, 프론트엔드와 백엔드가 일반적으로 동일한 주소에 위치해있다.

모든 것이 동일한 주소에서 왔기 때문에 브라우저는 해당 웹사이트를 신뢰하고
추가 확인 없이 동일한 주소에서 데이터를 가져올 수 있도록 허용했다.
만약 요청이 다른 주소에서 오는 경우, 보안 위험을 초래할 수 있기 때문에 모든 웹 사이트가
웹 사이트의 출처가 아닌 다른 주소로 요청하는 것을 차단한 것이다.

=> 즉, 사용자를 안전하게 보호하기 위해 브라우저는 동일 출처 정책(SOP)이라는
     보안규칙이 설계되었던 것이다.

나중에 웹 개발이 발전하면서 개발자들은 확장성과 유연성을 개선하기 위해 프론트엔드와 백엔드를 서로 다른 주소로 분리하기 시작했다
※ 그러나 동일 출처 정책은 여전히 유효했고 이제는 웹사이트가 다른 주소(백엔드)에서 데이터를 요청해야 하는데 브라우저가 보안상의 이유로 이러한 요청을 차단했기 때문에 문제가 발생하게 된다.

2. CORS의 개념

여기서 CORS가 등장한다. CORS는 브라우저의 보안 기능을 유지하면서 서로 다른 주소 간 안전한 통신을 허용하기 위해 도입되었다.
이는 웹사이트가 다른 주소(cross-origin)에서 리소스를 요청할 수 있도록 허용하지만,
다른 주소의 서버가 CORS 헤더를 통해 이를 명시적으로 허용하는 경우에만 가능하다.

요약하자면:

• 동일 출처 정책은 다른 주소에 대한 요청을 차단하여 사용자를 보호하기 위해 초기적으로 설정되었다.
• 프론트엔드와 백엔드 분리가 보편화되면서 이 정책은 서로 다른 주소에서 데이터를 요청해야 하는 개발자에게 장애물이 되었다.
• CORS는 원래의 보안 보호 기능을 유지하면서 이 문제를 해결하기 위해 만들어졌다.

3. CORS 에러 처리법

방법1)

CORS 에러를 해결을 위해 서치하면서, 가장 먼저 눈에 띈 해결법은 크롬에서 CORS를 그냥 끄는 것이다.

• 윈도우는 window+R 누르고 밑에 명령어를 입력한다.

chrome.exe --disable-web-security --user-data-dir="C:/ChromeDev"

• 맥은 터미널을 키고 아래 명령어을 입력한다.

chrome.exe --disable-web-security --user-data-dir="C:/ChromeDev"

위의 플래그를 설명하자면

• --disable-web-security: CORS 보안 정책 끄기
• --user-data-dir: 임시 사용자 프로필이 생성되므로 기본 Chrome 세션은 영향을 받지 않는다.

근데 위의 방법은 보안 기능을 없애는 것이기 때문에 무언가 찝찝하여 시도하지는 않았다. 신뢰할 수 있는 웹사이트에서 개발 목적으로만 사용하실분들만 하세요!!

방법2)

VSCode의 Live Server 확장을 사용하면 복잡한 구성 없이도 CORS 문제를 해결할 수 있다. Live Server를 통해 CORS를 허용하는 로컬 개발 서버를 쉽게 설정할 수 있다.

1. Extension에서 live Server 설치하기

• 확장 패널로 이동(단축키 Ctrl(cmd) + Shift + X를 사용할 수 있음)
• "Live Server"를 검색하고 Ritwick Dey의 확장 프로그램을 설치

2. 라이브 서버로 프로젝트 시작

• VSCode에서 프로젝트 폴더 열기
• 탐색기에서 index.html 파일(또는 HTML 파일)을 마우스 오른쪽 버튼으로 클릭
• "라이브 서버로 열기" 를 선택

이렇게 하면 로컬 서버가 시작되고 기본 브라우저에서 웹사이트가 열린다.
=> Live Server는 로컬 호스트에서 파일을 제공하여 로컬 개발을 위한 CORS 문제를 자동으로 해결하게 된다.

결과적으로 나는 두번째 방법을 사용하여 문제를 해결했다. firebase와 연동이 잘 되어서 문제없이 데이터를 제대로 가져오는 것을 확인하였다.

방법3) 프록시를 사용하여 CORS를 우회하는 방법