storybook middleware proxy 로 CORS 우회하기

 

 

fetch 를 사용하고 있는 컴포넌트 스토리를 작성할 때 CORS 이슈 해결이 필요했습니다.

스토리북은 빌드 시 webpack 을 사용하고 있고, dev server 실행 시 middleware 스택을 추가할 수 있습니다.

 

📌 storybook middleware 추가하기

예를 들어 다음과 같은 fetch 요청이 있고, /api 에 대한 프락시를 구성하고 싶다고 하겠습니다.

fetch('/api/blahblah')

 

패키지를 추가해줍니다.

 

$ npm i -D http-proxy-middleware

 

middleware.js 파일을 생성해 줍니다.

target과 origin을 설정해서 요청을 프록싱하는 규칙을 추가합니다.

 

// .storybook/middleware.js

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

module.exports = function middleware(router) {
  router.use(
    '/api',
    createProxyMiddleware({
      target: 'http://api-gateway',
      changeOrigin: true,
      pathRewrite: { '^/api': '' },
    }),
  );
};

 

이제 /api 로 유입되는 요청을 프락시 해서 origin 이 변경된 요청으로 호출합니다.

• 변경 전: http://localhost:6006/api/product
• 변경 후: http://api-gateway/product

 

 

📌 참고자료

Feature: custom proxy settings · Issue #208 · storybookjs/storybook

https://github.com/chimurai/http-proxy-middleware