使用 Webpack 和 BrowserSync 代理到后端

如何解决使用 Webpack 和 BrowserSync 代理到后端

我正在尝试使用 browserSync 热重载 SCSS + 查看移动实时更改。我从托管的后端服务器获取一些信息。它应该处理像 GET https://mybackendserver.com/api/somerequest 这样的请求。后端正在工作，因为有实时应用程序使用它进行测试，但我无法在本地代理它。

我的 Webpack devServer 配置：

 devServer: {
    disableHostCheck: true,hot: true,contentBase: './target/classes/static/',proxy: [{
      context: [
        '/api/*','/management/*','/login'
      ],target: `https://mybackendserver.com`,secure: false,headers: { host: 'localhost:8080' }
    },{
      context: [
        '/'
      ],target: `http://localhost:8080`,secure: false
    }],watchOptions: {
      ignored: /node_modules/
    }
  }
 

还有我的 browserSync 配置：

new browserSyncPlugin({
      host: 'localhost',port: 3000,proxy: {
        target: `http://localhost:9000`,proxyOptions: {
              changeOrigin: false
          }
      },socket: {
        clients: {
          heartbeatTimeout: 60000
        }
      }
    },{
      reload: false
    })

当我尝试访问 localhost:8080/login 时，Chrome 的控制台显示：

GET http://localhost:8080/app/main.someurlstuff.bundle.js net::ERR_ABORTED 404 (Not Found)

browserSync 运行控制台返回：

[HPM] Error occurred while trying to proxy request /api/authorization from localhost:3000 to http://localhost:8080 (ECONNREFUSED)

我这边有很多的配置错误，但我已经尝试解决这个问题好几个小时了，摆弄端口并禁用 browserSync（它没有为应用程序提供服务）。

提前致谢。