HMR tls issues with Visual Studio 2022 Vue template

Question

I am using the Microsoft Vue tutorial to create a solution with separate frontend and backend projects. I am using the default configuration that enables tls and I have trusted the IIS Express Development Certificate, but the frontend project appears to use the public IP address in hmr requests which are not included in the dev certificate that is based on localhost only.

My vue.config.js is as follows:

const fs = require('fs')
const path = require('path')
const HttpsAgent = require('agentkeepalive').HttpsAgent

const baseFolder =
  process.env.APPDATA !== undefined && process.env.APPDATA !== ''
    ? `${process.env.APPDATA}/ASP.NET/https`
    : `${process.env.HOME}/.aspnet/https`

const certificateArg = process.argv.map(arg => arg.match(/--name=(?<value>.+)/i)).filter(Boolean)[0]
const certificateName = certificateArg ? certificateArg.groups.value : 'WebAppFrontend'

if (!certificateName) {
  console.error('Invalid certificate name. Run this script in the context of an npm/yarn script or pass --name=<<app>> explicitly.')
  process.exit(-1)
}

const certFilePath = path.join(baseFolder, `${certificateName}.pem`)
const keyFilePath = path.join(baseFolder, `${certificateName}.key`)

module.exports = {
  devServer: {
    // host: 'localhost',
    https: {
      key: fs.readFileSync(keyFilePath),
      cert: fs.readFileSync(certFilePath),
    },
    proxy: {
      '^/weatherforecast': {
        target: 'https://localhost:5001/',
        changeOrigin: true,
        agent: new HttpsAgent({
          maxSockets: 100,
          keepAlive: true,
          maxFreeSockets: 10,
          keepAliveMsecs: 100000,
          timeout: 6000000,
          freeSocketTimeout: 90000
        }),
        onProxyRes: (proxyRes) => {
          const key = 'www-authenticate'
          proxyRes.headers[key] = proxyRes.headers[key] && proxyRes.headers[key].split(',')
        }
      }
    },
    port: 5002
  }
}

I tried to manually set the webpack host option to localhost but Visual Studio cannot start the backend project. If I modify the startup projects from both the front and backend projects to just the backend and then execute npm run serve manually, everything works fine.

How do I force the SockJS calls to use localhost instead of the public IP address without breaking the Visual Studio debugging setup?

Answer 1

Just fix same Error. Try this

in vue.config.js

module.exports = {
devServer: {
    host: '0.0.0.0',
    public: '0.0.0.0:5002',
    disableHostCheck: true,

Answer 2

I am using @vue/cli 5.0.4 in a project with [email protected]

I tried the solution from @asp.entwickler but got some errors because disableHostCheck and public have been deprecated.

According to https://cli.vuejs.org/migrations/migrate-from-v4.html#vue-cli-service

webpack-dev-server has been updated from v3 to v4. So there are breaking changes with regard to the devServer option in vue.config.js.

The disableHostCheck option was removed in favor allowedHosts: 'all'; public, sockHost, sockPath, and sockPort options were removed in favor client.webSocketURL option.

so the solution was to set devServer.client.webSocketURL.hostname. Also setting allowedHosts: 'auto' instead of 'all' seems to be a good idea unless you really need it.

When set to 'auto' this option always allows localhost, host, and client.webSocketURL.hostname:

module.exports = {
    devServer: {
        allowedHosts: 'auto',
        client: {
            webSocketURL:
            {
                hostname: 'localhost'
            }
        },