CORS와 그 해결법

개발을 할 때 자주 발생하는 CORS, 오늘은 이 친구를 톺아보려고 한다.

CORS란?

CORS란 Cross-Origin Resource Sharing의 약자로 교차 출처 리소스 공유라는 뜻입니다. 의미 그대로 서로 다른 출처에서 리소스를 공유하는 것입니다.

여기서 말하는 Origin 이란 프로토콜, 호스트, 포트입니다. 이 중 하나라도 다르다면 다른 출처입니다.

예를 들어
http://www.naver.com 과 https://www.naver.com은 프로토콜이 다르므로 서로 다른 출처입니다.
또, https://www.naver.com:8000 https://www.naver.com:8001은 포트 번호가 다르므로 다른 출처입니다.

그렇다면 CORS는 어떻게 해결할 수 있을까요?

CORS 해결하기

1. 프론트측에서 해결하기
프론트측에서는 주로 프록시 서버를 이용하여 해결합니다. http-proxy-middleware 라이브러리를 사용하거나 webpack-dev-server의 프록시 기능을 사용하면 CORS 정책을 우회하면 됩니다.

2. 백엔드측에서 해결하기
백엔드측에서는 Access-Control-Allow-Origin을 세팅하여 프론트의 출처를 추가해줍니다.