리액트에서 프록시 여러 개 설정하는 방법

yarn add http-proxy-middleware

// src/setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = (app) => {
  app.use(
    createProxyMiddleware('/v1/search/movie.json', {
      target: 'https://openapi.naver.com',
      changeOrigin: true,
    }),
  );
  app.use(
    createProxyMiddleware('/api', {
      target: 'http://localhost:4000/',
      changeOrigin: true,
    }),
  );
};

위와 같이 설정을 해주면 이제 리액트 애플리케이션에서 client.get('/vi/search/movie.json')을 하면, 웹팩 개발 서버가 프록시 역할을 해서 https://openapi.naver.com/vi/search/movie.json 에 대신 요청한 뒤 결과물을 응답해 줌. 

 

/api 뒤에 더 붙여서 요청을 해도 다 받아줌

따라서, client.get('api/movies')를 하면, http://localhost:4000/api/movies에 대신 요청한 뒤 결과물을 응답함.

client.post('/api/auth/login')을 해도 http://localhost:4000/api/auth/login으로 요청해줌.