[React] CORS 이슈 , Proxy 설정하기
[React] CORS 이슈 , Proxy 설정하기 client 와 server 가 사용하는 포트가 다를때 Cross-Origin Resource Sharing 즉, CORS 이슈가 발생한다. Cross-Origin Resource Sharing (CORS) Cross 는 정보의 이동을 뜻하고 Origin 은 client와 server 각각을 의미한다. Resource 는 말그대로 자원 즉, 데이터를 말하며 Sharing 은 공유를 말한다. 즉, client와 server 간의 데이터 공유에 있어서 발생하는 보안 문제점에 관한 정책이다. 한국어로 교차 출처 리소스 공유라고 하며 교차 출처 자원 공유는 최초 자원이 서비스된 도메인 밖의 다른 도메인으로부터 요청할 수 있게 허용하는 구조이다. 특정한 도메인간의 요청 특히 Ajax 요청은 동일-출처 보안 정책에 의해 기본적으로 금지된다. 예시를 들어보면 1) Web Docment -------------------------> Web Server (domain-a.com) (domain-a.com) 둘은 Same-origin requests이기 때문에 항상 허용되지만 2) Web Docment -------------------------> Web Server (domain-a.com) (domain-b.com) 둘은 Cross-origin requests이기 때문에 CORS 정책에 의해 컨트롤 된다. 나의 경우 프로젝트를 할때 client 쪽은 리액트를 사용하여 3000번 포트를 사용하고 있었고 server 쪽은 nodejs 를 사용하여 구성했는데 5000번 포트를 사용하고 있어서 client 쪽에서 요청을 보내더라도 server와의 포트가 다르기 때문에 요청에 대한 응답을 제대로 받을 수 없었다. 해결방법으로 http