webpack-dev-server 在 https 上开发答案

【问题标题】：webpack-dev-server develop on httpswebpack-dev-server 在 https 上开发
【发布时间】：2017-06-04 05:09:23
【问题描述】：

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

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

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

控制台错误：

> [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。但我不知道如何解决这个问题。

【问题讨论】：

标签： reactjs websocket webpack webpack-dev-server

【解决方案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

【讨论】：