webpack-dev-server develop on https

Question

My .NET Core API is exposed over https.

I want to do request to API from my React app running on webpack-dev-server. But webpack-dev-server running on http by default and CORS block any requests.

I reconfigure webpack to force use https (with my *.pfx certificate example), but then i have 'private connection error' in browser at every refresh (minor problem) and auto-refreshing stops working.

console errors:

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

I think that websockets of webpack-dev-server can not establish connection because of https url. But i do not know how to fix this.

Answer 1

Proxy your .NET core api in your webpack dev server config

{
  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
    },
  }
}

More docs on proxying with webpack dev server:
https://webpack.js.org/configuration/dev-server/#devserverproxy