TIL 2024-01-19 CORS 란?

CORS(Cross Origin Resouces Sharing)는 서버가 웹 브라우저에서 리소스를 로드할 때 다른 오리진을 통해 로드하지 못하게 하는 HTTP 헤더 기반 메커니즘입니다.

 

프론트엔드 개발 시 프론트엔드 서버를 만들어서 백엔드 서버와 통신할 때 주로 CORS 에러를 마주치는데, 이를 해결하기 위해 프론트엔드에서 프록시 서버를 만들기도 합니다.

💡 Origin이란 무엇일까요?

프로토콜과 호스트 이름, 포트의 조합을 말합니다.
https://wonow.com:1515/test에서 Origin은 https://wonow.com:1515 까지가 Origin 입니다.

 

 

예를 들어 프론트에서 127.0.0.1:2000 으로 테스팅을 하는데 백엔드 서버는 127.0.0.1:4000 이라면 포트 번호가 다르기 때문에 CORS 에러가 납니다. 이떄 프록시 서버를 둬서 프론트 서버에서 요청되는 오리진을 127.0.0.1:4000 으로 바꾸는 것이죠

자연스레 CORS 에러 해결은 물론이며 다양한 API 서버와의 통신도 매끄럽게 할 수 있는 것입니다.