SEB_27_Proxy

[keyword]

cors error, proxy

---

proxy는 대리라는 뜻을 담고 있으며, cors error등의 문제를 피하기 위해서 CRA에서는 라이브러리로 활용이 가능한 cors정책 우회 방법이다.

일단 기존에 전통적인 api 요청의 흐름이다

이 흐름은 외부의 위험한 요소를 막기 위해 동일한 출처의 리소스 공유만 가능하게 하는 SOP정책에서부터 나오게 되었다.

1. 클라이언트에서 요청

2. 브라우저에서 서버로 필요한 리소스 요청

3. 서버 응답

4. 브라우저에서 cors정책

 

주소 유출의 위험도 존재한다.

 

✔️이 때 CRA 개발 시 사용할 수 있는 유용한 라이브러리가 있다 Proxy라고 cors 정책을 우회하는 방법이다.

proxy

클라이언트가 주소를 입력한다기 보다는 proxy라는 대리 라이브러리를 사용해 서버로 정보를 교환한 뒤 브라우저에 뿌려준다.

이 방법으로 하면 주소 직접 유출이나 귀찮은 cors error 약간 피할 수 있다.

또 다른 좋은 점은 proxy에 캐시 기능으로 동일 요청 시 캐시에 정보가 있다면 서버로 요청하지 않고 proxy에서 바로 전달해준다.

 

Create-React-App

npm install http-proxy-middleware --save

라이브러리 설치하면 된다

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

module.exports = function(app) {
  app.use(
    '/api' // 파라미터 입력
    createProxyMiddleware({
      target: 'http://localhost:4000', //타겟이 되는 api url를 입력(서버 포트 등등)
      changeOrigin: true, //대상 서버 구성에 따라 호스트 헤더가 변경되도록 설정
    })
  );
};

// 만약 주소 여러개
module.exports = function(app) {
  app.use(
    '/api' // 파라미터 입력
    createProxyMiddleware({
      target: 'http://localhost:4000', //타겟이 되는 api url를 입력(서버 포트 등등)
      changeOrigin: true, //대상 서버 구성에 따라 호스트 헤더가 변경되도록 설정
    })
  );
  app.use(
    '/api2' // 파라미터 입력
    createProxyMiddleware({
      target: 'http://localhost:3050', //타겟이 되는 api url를 입력(서버 포트 등등)
      changeOrigin: true, //대상 서버 구성에 따라 호스트 헤더가 변경되도록 설정
    })
  );
};