reactjs - webpack-dev-server 在 https 上开发

Question

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

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

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

控制台错误:

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