프로그래밍 공부 노트

[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

프록시 서버 (Proxy Server) 프록시 서버(proxy server)는 클라이언트가 자신을 통해서 다른 네트워크 서비스에 간접적으로 접속할 수 있게 해 주는 컴퓨터 시스템이나 응용 프로그램을 가리킨다. 서버와 클라이언트 사이에 중계기로서 대리로 통신을 수행하는 것을 가리켜 '프록시', 그 중계 기능을 하는 것을 프록시 서버라고 부른다. 프록시 서버 중 일부는 프록시 서버에 요청된 내용들을 캐시를 이용하여 저장해 둔다. 이렇게 캐시를 해 두고 난 후에, 캐시 안에 있는 정보를 요구하는 요청에 대해서는 원격 서버에 접속하여 데이터를 가져올 필요가 없게 됨으로써 전송 시간을 절약할 수 있게 됨과 동시에 불필요하게 외부와의 연결을 하지 않아도 된다는 장점을 갖게 된다. 또한 외부와의 트래픽을 줄이게 됨으로써 네트워크 병목 현상을 방지하는 효과도 얻을 수 있게 된다. Proxy Server 의 기능 1. 유저의 아이피를 Proxy Server에서 임의로 바꿔 버릴 수 있다. 그래서 인터넷에서는 접근하는 사람의 IP를 모르게 된다. 2. 보내는 데이터도 임의로 변경할 수 있다. 3. 방화벽 기능 4. 웹 필터 기능 5. 캐쉬 데이터, 공유 데이터 제공 기능 Proxy Server 를 사용하는 이유 1. 회사에서 직원들이나 집안에서 아이들 인터넷 사용 제어 2. 캐쉬를 이용해 더 빠른 인터넷 이용 제공 3. 더 나은 보안 제공 4. 이용 제한된 사이트 접근 가능