[Front end] React Proxy 설정 and 멀티

 

React에서 Back end API 요청 시 CORS 관련 오류를 접하게 된다. 이런 경우에는 React에 Proxy 설정을 적용하면 해결이 된다. Proxy 설정에는 2가지 방법이 있다.

기본 Proxy 설정(package.json)

...
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all",
      "ie >= 11"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version",
      "ie >= 11"
    ]
  },
  "proxy": "https://reference-m1.tistory.com"
...

 

수동 Proxy 설정(setupProxy.json)

수동으로 Proxy를 설정을 하면 복수의 경로도 가능하다. 이 경우에는 "http-porxy-middleware" 모듈이 필요하다. setupProxy.json 파일을 src 하위에 생성 후 아래와 같이 작성하면 된다.

const proxy = require('http-proxy-middleware');

module.exports = (app) => {
    app.use(
        proxy('/api', {
            target : 'https://reference-m1.tistory.com',
            changeOrigin: true
        })
    );
};

"http-porxy-middleware" 모듈이 v1.0 이상인 경우 설정 방식 변경되었다.

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

module.exports = (app) => {
   app.use(
       createProxyMiddleware('/api', {
           target: 'https://reference-m1.tistory.com',
           changeOrigin: true
       })
   )
};

 

Proxy multi 설정(setupProxy.json)

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

module.exports = (app) => {
   app.use(
       createProxyMiddleware('/api/v1', {
           target: 'https://reference-m1.tistory.com',
           changeOrigin: true
       })
   )
   app.use(
       createProxyMiddleware('/api/v2', {
           target: 'https://reference-m2.tistory.com',
           changeOrigin: true
       })
   )
};