React_CORS 이슈, Proxy란?

Server(localhost:5000) <> Client(localhost:3000)

서로 포트가 다를 때 '어떤 설정을 각각에 하지 않으면' req를 전송할 때 CORS 보안 정책에 의해 막힌다.

 

 

 해결법은 많다. 

1) 개발자 도구 이용 (Chrome Cors Extension)  : 개발자만 사용하므로 제한적

2) 프론트엔드 부분만 수정 (Json p 방식 이용 - 모든 req를 get req로 변경) : 제한적

3) 백엔드-프론트 모두 컨트롤 하고 싶다 : 서버에 Client에서 오는 걸 받을 수 있게 해주고.. 등

 

 

4) Proxy 설정하는 법 

 

///////// 1. 프록시 라이브러리 활용

 

http://create-react-app.dev/docs/proxying-api-requests-in-development

참고

 

#Configuring the Proxy Manually  순서 참고

(proxy를 임의로 설정해줌)

 

1) npm install http-proxy-middleware --save   (client에 설치 , 혹 에러나면 server에서도 해보시오)

2) src폴더 > setUpProxy.js 폴더 생성

3) 다음을 입력

const { createProxyMiddleware } = require('http-proxy-middleware');

 

module.exports = function(app) {

app.use(

'/api',  (변경)

createProxyMiddleware({

target: 'http://localhost:5000',

changeOrigin: true,

})

);

};

 

★★★ 배포시, target을 배포 서버 url로 변경 / client에서 '/api'는 그대로 쓰면 된다!!

 

 

 

///////// 2. package.json 에서 설정하기

  {
   ...
   "proxy" : "http://localhost:3000",
   ... 
  }

 

 

**Proxy란?

유저  <>  Proxy Server  <>  인터넷

 1) IP를 ProxyServer에서 임의로 바꿀 수 있음 >> 인터넷에서 접근하는 사람의 IP를 모르게 함

 2) 보내는 데이터도 임의로 바꿀 수 있음

 3) 방화벽 기능 / 웹 필터 기능 / 캐쉬 데이터, 공유 데이터 제공 기능

      (이미지를 보고싶을 때 인터넷에 굳이 저장하지 않아도, proxy에서 빠르게 제공 가능하다)

 

 

**ProxyServer 사용 이유

 1) 회사에서 직원들 or 집안에서 아이들 인터넷 사용 제어 (어떤 사이트를 막음)

 2) 캐쉬를 이용해 더 빠른 인터넷 이용 제공

 3) 더 나은 보안 제공

 4) 이용 제한된 사이트 접근 가능