webpack-dev-server 在 https 上开发

Question

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

我想从我在 webpack-dev-server 上的 React 应用运行向 API 发出请求。但是 webpack-dev-server 运行默认情况下在 http 上并且 CORS 阻止任何请求。

我重新配置 webpack 以强制使用 https（使用我的 *.pfx 证书 example），但是我每次刷新时都会在浏览器中显示 'private connection error'（小问题）并且自动刷新停止工作。

控制台错误：

> [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 核心 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

webpack-dev-server 在 https 上开发

webpack-dev-server develop on https

websocket

reactjs

webpack

webpack-dev-server