노드&리액트 공부기록(11) - CORS 이슈, Proxy로 해결하기

✅교차 출처 리소스 공유(CORS)

• 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에서 알려주는 체제
• 웹 애플리케이션은 리소스가 자신의 출처와 다를 때 교차 출처 HTTP 요청을 실행한다.
• 하지만 보안상의 이유로 브라우저는 스크립트에서 시작한 교차 출처 HTTP 요청을 제한한다.
• 이렇게 다른 출처의 리소스를 불러오려면 그 출처에서 올바른 CORS 헤더를 포함한 응답을 반환해야 한다.

 

server: 3000번, client: 3000번 / 같은 port끼리 request를 보내는 것은 문제가 없지만

server: 5000번, client: 3000번 / 이렇게 서로 다른 port끼리 정보 교환이 있을 때 내가 알지 못하는 port에서 일방적으로 정보를 보내면 보안상의 문제가 생기므로 여러 방법 중 proxy를 이용해 해결하도록 한다.

 

✅Proxy로 해결하기

 

proxy api를 참고하여

setupProxy.js 파일 생성하면 끝!

---

✅proxy server 사용 이유!

• 1. 회사에서 직원들이나 집안에서 아이들의 인터넷 사용 제어
• 2. 캐쉬를 이용해 더 빠른 인터넷 이용 제공
• 3. 더 나은 보안 제공
• 4. 이용 제한된 사이트 접근 가능