CORS = Cross-Origin Resource Sharing
-
같은 서버가 아닌곳에서 리소스를 가져올 때(get, post 요청 등) 제한되면서 에러가 뜨는데 이 원리가 CORS이다.
-
예를 들어 내 사이트에서 naver의 정보를 axios로 가져오려고 할 때 에러가 뜨는데 이는 내 사이트와 Naver가 같은 서버가 아니라 CORS에 걸리는 것이다.
-
또한, 프론트서버와 백서버를 다른포트로 만들었을 때도 포트가 다르면 다른 서버로 인식하기 때문에 이와 같은 현상이 일어난다.
-
이를 해결하기위한 방법 중 하나가 Proxy를 이용하는 것이다.
Proxy
프록시 서버: 클라이언트가 자신을 통해서 다른 네트워크 서비스에 간접적으로 접속할 수 있게 해 주는 컴퓨터 시스템이나 응용 프로그램을 가리킨다. 서버와 클라이언트 사이에 중계기로서 대리로 통신을 수행하는 것을 가리켜 '프록시', 그 중계 기능을 하는 것을 프록시 서버라고 부른다. - 위키피디아
해외사이트에 가입할 때 한국IP를 차단해 놓은경우 프록시 서비스를 이용해서 우회해서 가입할때 쓰는데 그것을 떠올리면 이해가 쉬울 것 같다.
백 서버는 5000번 포트이고 프론트 서버는 3000번 포트일 때, 프론트(3000)에서 axios로 정보를 가져오려고 하면 백(5000)에서 다른서버라고 생각해서 막게 되는데 프론트(3000)에서 온 요청을 마치 백(5000)에서 온것처럼 바꿔주는게 프록시의 역할이다.
아래는 백서버에 프로식를 구현한 간단한 코드이다.
'/api' URL를 통해 들어오는 요청을 마치 백(5000)에서 들어오는것으로 인식해라 라는 코드라고 생각하면 된다.
이렇게 백에 쳐두면 프론트에서 아래와 같이 get요청을 보냈을때 정보를 잘 받을 수 있다.
