[React] setupProxy

create-react-app 프로젝트에 Proxy 설정

모듈 설치

yarn add axios

yarn add --dev http-proxy-middleware

setupProxy.js

• 경로 : <프로젝트>/src/setupProxy.js

• v0.x.x

  const proxy = require('http-proxy-middleware');
  
  // 요청 : /api/**
  // 실제 : http://localhost:8080/api/**
  const apiUrl = 'http://localhost:8080';
  const apiContext = ['/api'];
  
  module.exports = (app) => {
      app.use(
          proxy(apiContext, {
              target: apiUrl,
              changeOrigin: true,
          })
      );
  };
  

• v1.x.x

  const { createProxyMiddleware } = require("http-proxy-middleware");
  
  module.exports = (app) => {
    app.use(
      "/api",
      createProxyMiddleware({
        target: "http://localhost:8080",
        changeOrigin: true,
      })
    );
    app.use(
      "/ws-stomp",
      createProxyMiddleware({ target: "http://localhost:8080", ws: true })
    );
  };
  

axios 요청

import axios from 'axios';

// IE에서 axios 통신 결과 캐싱되는 현상 방지
axios.defaults.headers.common = {
    Pragma: 'no-cache'
};

axios.get('/api/get').then((response) => {
    console.log(response);
});

Storybook에 Proxy 적용

middleware.js

• 경로 : <프로젝트>/.storybook/middleware.js

const setupProxy = require('../src/setupProxy.js');

module.exports = setupProxy;

참고

• https://velog.io/@velopert/create-react-app-v2
• https://github.com/storybooks/storybook/issues/208