webpack-dev-server 在 https 上开发

Question

我的 .NET Core API 通过 https 公开。

我想从运行在 webpack-dev-server 上的 React 应用程序请求 API。但是 webpack-dev-server 默认运行在 http 上，CORS 会阻止任何请求。

我重新配置 webpack 以强制使用 https（使用我的 *.pfx 证书示例），但是每次刷新时我都会在浏览器中出现“私有连接错误”（小问题）并且自动刷新停止工作。

控制台错误：

> [HMR] Waiting for update signal from WDS...
> app.js:4049 WebSocket connection to 'wss://localhost:8080/sockjs-node/826/sy0x5mcu/websocket' failed: Error in connection establishment: net::ERR_INSECURE_RESPONSE
> [WDS] Hot Module Replacement enabled.

我认为 webpack-dev-server 的 websockets 由于 https url 无法建立连接。但我不知道如何解决这个问题。

Answer 1

在 webpack 开发服务器配置中代理您的 .NET core api

{
  proxy: {
    '/api/**': {
      target: 'https://localhost:443', // or whichever port it's listening on
      secure: false,
      changeOrigin: true, // this might not be necessary depending on how restrictive your host is
      pathRewrite: {'^/api' : ''}, // rewrite request /api/foo -> https://localhost:443/foo
    },
  }
}

有关使用 webpack 开发服务器进行代理的更多文档：
https ://webpack.js.org/configuration/dev-server/#devserverproxy