'Error occurred while trying to proxy request' when using mock api and external api

[gloriaJun]

Error

GET 메소드 호출 시에는 문제가 없으나, POST 메시지를 /api 하위로 호출하는 경우에 아래와 같은 에러가 발생함

• web console

  onError Error: timeout of 5000ms exceeded
  at createError (createError.js?2d83:16)
  at XMLHttpRequest.handleTimeout (xhr.js?b50d:89)

• webpack debug console

  
  [HPM] Error occurred while trying to proxy request /banking/v1/accounts/A1B1C1D1/transactions/statement from front-web-bankth.line-beta.me:3000 to https://channel-web-bankth.line-beta.me (ECONNRESET) (https://nodejs.org/api/errors.html#errors_common_system_errors)

### 원인

webpack-dev-server를 이용하여 mock server와 외부의 api를 아래와 같이 정의하여 사용하는 경우에..

```javascript
    devServer: {
      host: '0.0.0.0',
      port: PORT, // default port is 3000
      hot: true,
      inline: true,
      // open: true,
      disableHostCheck: true,
      historyApiFallback: {
        index: `/index.html`,
      },
      before: function(app) {
        applyMockMiddleware(app);
      },
      proxy: [
        {
          context: ['/mock'],
          target: 'http://localhost',
          changeOrigin: true,
        },
        {
          context: ['/api', ],
          target: 'https://~~~~~~',
          changeOrigin: true,
          logLevel: 'debug',
        },
      ],
    },

mock api의 post 메시지 전송 시에 req.body에 데이타를 담기 위하여 applyMockMiddleware에 정의한 아래의 구문으로 인하여 모든 라우터에 bodyParser가 적용되어 발생한 현상

const bodyParser = require('body-parser');

// ...SKIP
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

해결

/mock 하위의 라우터에 대해서만 bodyParser가 적용되도록 수정한다.

const bodyParser = require('body-parser');

// ...SKIP
app.use('/mock', bodyParser.urlencoded({ extended: false }));
app.use('/mock', bodyParser.json());