CORS Error를 만나다

CORS란?

CORS (Cross-Origin Resource Sharing)는 웹 어플리케이션에서 다른 도메인의 리소스에 접근할 때 발생하는 보안 이슈를 해결하기 위한 표준 방법이다. CORS는 브라우저 단에서 작동하며, 웹 서버가 특정한 HTTP 헤더를 반환함으로써 웹 브라우저가 자원에 대한 권한을 부여하도록 한다. 이 헤더는 서버에게 특정한 도메인, 프로토콜, 포트에서만 요청을 허용하도록 지시할 수 있다.

 

CORS는 웹 어플리케이션에서 다른 도메인으로부터 리소스를 요청하는 데에 있어서 발생하는 보안 문제를 해결한다. 이전에는 같은 도메인에서만 요청할 수 있었기 때문에, 다른 도메인으로 요청을 보내는 경우 보안 문제가 발생할 수 있었다. 그러나 CORS를 사용하면 다른 도메인에서도 자원에 접근할 수 있다.

 

CORS는 다음과 같은 방법으로 작동한다.

 

브라우저는 HTTP 요청을 보낸다.서버는 요청에 대한 응답을 반환한다.브라우저는 응답을 분석하여 CORS 헤더를 확인한다.CORS 헤더가 존재하면 브라우저는 자원에 대한 권한을 검사한다.권한이 허용되면 자원을 사용하고, 그렇지 않으면 에러가 발생한다.

CORS는 웹 애플리케이션에서 다른 도메인의 리소스에 접근하는 데 있어서 필수적인 보안 기능이다. CORS 에러를 해결하기 위해서는 해당 상황에 맞는 CORS 설정을 서버 측에서 제공해야 한다. 그러나 CORS 설정이 잘못되면 보안 위험을 초래할 수 있으므로, 서버 개발자는 반드시 적절한 설정을 수행해야 한다. 또한, 보안을 위해서는 최소한의 CORS 설정만을 허용하는 것이 좋다.

여기서 궁금점

1. 허용한 범위가 아니면 cors error가 발생하는 것?!
2. 그렇다면 그 허용 범위를 백엔드랑 클라우드랑 맞추지 않으면 나는것?!

출처(Origin)의 동일함은 두 URL의 구성 요소 중Protocol(Scheme), Host, Port 이 3가지만 동일하다면 동일 출처로 판단한다.

다음은 https://www.domain.com:3000 출처에 대한 여러 URL에 따른 동일 출처 비교 표이다.

URL 동일 출처 이유

https://www.domain.com:3000/about	✅	프로토콜, 호스트, 포트 번호 동일
https://www.domain.com:3000/about?username=inpa	✅	프로토콜, 호스트, 포트 번호 동일
http://www.domain.com:3000	❎	프로토콜 다름 (http ≠ https)
https://www.another.co.kr:3000	❎	호스트 다름

 

문제 발생

웹 애플리케이션 개발 중, CORS 에러가 발생했습니다. 이 문제는 백엔드 서버가 로컬 개발 환경에서의 요청을 차단했기 때문에 발생한 것으로 확인되었다.

 

내가 생각한 프론트 측에서 확인해 볼 사항은

 

1. 요청 헤더 확인

네트워크 탭(Network)을 열고 문제를 일으킨 요청을 클릭하여 요청 및 응답 헤더를 확인합니다. 요청 헤더에 Origin 헤더가 포함되어 있는지 확인합니다.

• Origin 헤더는 요청이 어떤 출처에서 왔는지 나타냄.

2. 서버 응답 헤더 확인

응답 헤더에 Access-Control-Allow-Origin 헤더(어떤 출처의 요청을 허용하는 지에 대한 내용)가 포함되어 있는지 확인 필요.

• 필요한 경우 다른 CORS 관련 헤더도 확인해야 함.
• 예를 들어, Access-Control-Allow-Methods, Access-Control-Allow-Headers, Access-Control-Allow-Credentials 등.

3. 요청 방법 확인

CORS는 GET, POST, HEAD와 같은 간단한 요청(simple requests)과 OPTIONS, PUT, DELETE와 같은 프리플라이트 요청(preflight requests)으로 나눌 수 있어서 확인 필요.

• 사전 요청이 올바르게 처리되는지 확인합니다.

 

문제 해결

위의 사항들을 모두 확인했지만 문제가 없었다.. 따라서 백엔드 서버 구성을 확인하여 어떤 출처가 허용되었는지 검토한 후, 설정을 수정함으로써 문제를 해결할 수 있었다!!!!