How to correctly proxy requests in browser-sync to another host?

Question

JavaScript

Hello!
There is a setting in dev mode (if more detailed at the link ):

import browserSync from 'browser-sync';
import historyApiFallback from 'connect-history-api-fallback';
import webpack from 'webpack';
import webpackDevMiddleware from 'webpack-dev-middleware';
import webpackHotMiddleware from 'webpack-hot-middleware';
import proxy from 'http-proxy-middleware';
import config from '../webpack.config.dev';

const bundler = webpack(config);

browserSync({

  server: {
    baseDir: 'src',
    middleware: [
      historyApiFallback(),

      webpackDevMiddleware(bundler, {
        publicPath: config.output.publicPath,

        noInfo: false,
        quiet: false,
        stats: {
          assets: false,
          colors: true,
          version: false,
          hash: false,
          timings: false,
          chunks: false,
          chunkModules: false
        },
      }),

      webpackHotMiddleware(bundler),

      proxy('**', {target: 'http://mysite.loc'})
    ]
  },

  files: [
    'src/*.html'
  ]
});

I use isomorphic-fetch in my application .
When compiling, we have a host:

[BS] Access URLs:
 -------------------------------------
       Local: http://localhost:3000
    External: http://192.168.56.1:3000
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.56.1:3001
 -------------------------------------

We send an isomorphic-fetch request from the browser to the host localhost:3000 , thereby this host scripted this request to the host mysite.loc and the response was returned to the browser.
Unfortunately, I'm confused and can't figure it out.
Please clarify where and what you need to enter the settings for proxying the request
and whether it is advisable to use http-proxy-middleware (i.e. is this lib suitable for this task).
Thank you!

Answer 1

A sad mess in the world of fort assembly.
Due to the fact that it proxy('**', {target: 'http://mysite.loc'})was the last one in the array, not a damn thing did not work.
Actually moved this middleware to the beginning of the array and voila, everything works.

middleware: [

      proxy('**', {target: 'http://mysite.loc'})
      historyApiFallback(),

      webpackDevMiddleware(bundler, {
        publicPath: config.output.publicPath,

        noInfo: false,
        quiet: false,
        stats: {
          assets: false,
          colors: true,
          version: false,
          hash: false,
          timings: false,
          chunks: false,
          chunkModules: false
        },
      }),

      webpackHotMiddleware(bundler),
    ]