Local HTTPS doesn't work with Vite 3

[gustavopch]

Describe the bug

Up to vite@2.9.14, I'm able to run vite --https and open https://localhost:5173 or https://192.168.0.100:5173 in my browser just fine. With vite@3.0.0 (and also vite@3.0.2), it shows:

Chrome 103 on macOS 12.4:

This site can’t provide a secure connection
localhost uses an unsupported protocol.
ERR_SSL_VERSION_OR_CIPHER_MISMATCH
Unsupported protocol
The client and server don't support a common SSL protocol version or cipher suite.

Safari 15.5 on macOS 12.4:

Safari Can't Open the Page
Safari can't open the page "https://localhost:5173" because Safari can't establish a secure connection to the server "localhost".

Chrome 103 on iOS 15.5:

This site can't provide a secure connection
192.168.0.100 sent an invalid response.
ERR_SSL_PROTOCOL_ERROR

Safari 15.5 on iOS 15.5:

Safari cannot open the page because it could not establish a secure connection to the server.

Chrome 103 on Android 9:

This site can't provide a secure connection
192.168.0.100 uses an unsupported protocol.
ERR_SSL_VERSION_OR_CIPHER_MISMATCH

Reproduction

I literally just created a project from scratch with yarn create vite using the option vanilla and ran yarn dev --https.

System Info

System:
    OS: macOS 12.4
    CPU: (8) arm64 Apple M1
    Memory: 86.84 MB / 8.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.13.1 - ~/.asdf/installs/nodejs/16.13.1/bin/node
    Yarn: 1.22.17 - ~/.asdf/installs/nodejs/16.13.1/.npm/bin/yarn
    npm: 8.9.0 - ~/.asdf/installs/nodejs/16.13.1/.npm/bin/npm
    Watchman: 2022.03.14.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 103.0.5060.134
    Safari: 15.5
  npmPackages:
    vite: ^3.0.0 => 3.0.2

Used Package Manager

yarn

Logs

Click to expand!

$ vite --https --debug
  vite:config no config file found. +0ms
  vite:config using resolved config: {
  vite:config   root: '/Users/gustavo/Projects/experiments/vite-https',
  vite:config   base: '/',
  vite:config   mode: 'development',
  vite:config   configFile: undefined,
  vite:config   logLevel: undefined,
  vite:config   clearScreen: undefined,
  vite:config   optimizeDeps: {
  vite:config     disabled: 'build',
  vite:config     force: undefined,
  vite:config     esbuildOptions: { preserveSymlinks: undefined }
  vite:config   },
  vite:config   server: {
  vite:config     preTransformRequests: true,
  vite:config     https: true,
  vite:config     middlewareMode: false,
  vite:config     fs: { strict: true, allow: [Array], deny: [Array] }
  vite:config   },
  vite:config   configFileDependencies: [],
  vite:config   inlineConfig: {
  vite:config     root: undefined,
  vite:config     base: undefined,
  vite:config     mode: undefined,
  vite:config     configFile: undefined,
  vite:config     logLevel: undefined,
  vite:config     clearScreen: undefined,
  vite:config     optimizeDeps: { force: undefined },
  vite:config     server: { https: true }
  vite:config   },
  vite:config   resolve: { alias: [ [Object], [Object] ] },
  vite:config   publicDir: '/Users/gustavo/Projects/experiments/vite-https/public',
  vite:config   cacheDir: '/Users/gustavo/Projects/experiments/vite-https/node_modules/.vite',
  vite:config   command: 'serve',
  vite:config   ssr: {
  vite:config     format: 'esm',
  vite:config     target: 'node',
  vite:config     optimizeDeps: { disabled: true, esbuildOptions: [Object] }
  vite:config   },
  vite:config   isWorker: false,
  vite:config   mainConfig: null,
  vite:config   isProduction: false,
  vite:config   plugins: [
  vite:config     'vite:pre-alias',
  vite:config     'alias',
  vite:config     'vite:modulepreload-polyfill',
  vite:config     'vite:optimized-deps',
  vite:config     'vite:resolve',
  vite:config     'vite:html-inline-proxy',
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'vite:json',
  vite:config     'vite:wasm-helper',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'vite:wasm-fallback',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:worker-import-meta-url',
  vite:config     'vite:dynamic-import-vars',
  vite:config     'vite:import-glob',
  vite:config     'vite:client-inject',
  vite:config     'vite:import-analysis'
  vite:config   ],
  vite:config   build: {
  vite:config     target: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari13' ],
  vite:config     polyfillModulePreload: true,
  vite:config     outDir: 'dist',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     cssTarget: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari13' ],
  vite:config     sourcemap: false,
  vite:config     rollupOptions: {},
  vite:config     minify: 'esbuild',
  vite:config     terserOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: null,
  vite:config     manifest: false,
  vite:config     lib: false,
  vite:config     ssr: false,
  vite:config     ssrManifest: false,
  vite:config     reportCompressedSize: true,
  vite:config     chunkSizeWarningLimit: 500,
  vite:config     watch: null,
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] }
  vite:config   },
  vite:config   preview: {
  vite:config     port: undefined,
  vite:config     strictPort: undefined,
  vite:config     host: undefined,
  vite:config     https: true,
  vite:config     open: undefined,
  vite:config     proxy: undefined,
  vite:config     cors: undefined,
  vite:config     headers: undefined
  vite:config   },
  vite:config   env: { BASE_URL: '/', MODE: 'development', DEV: true, PROD: false },
  vite:config   assetsInclude: [Function: assetsInclude],
  vite:config   logger: {
  vite:config     hasWarned: false,
  vite:config     info: [Function: info],
  vite:config     warn: [Function: warn],
  vite:config     warnOnce: [Function: warnOnce],
  vite:config     error: [Function: error],
  vite:config     clearScreen: [Function: clearScreen],
  vite:config     hasErrorLogged: [Function: hasErrorLogged]
  vite:config   },
  vite:config   packageCache: Map(0) {},
  vite:config   createResolver: [Function: createResolver],
  vite:config   worker: {
  vite:config     format: 'iife',
  vite:config     plugins: [
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object]
  vite:config     ],
  vite:config     rollupOptions: {}
  vite:config   },
  vite:config   appType: 'spa',
  vite:config   experimental: { importGlobRestoreExtension: false, hmrPartialAccept: false }
  vite:config } +5ms
  vite:deps scanning for dependencies... +0ms

  VITE v3.0.2  ready in 112 ms

  ➜  Local:   https://127.0.0.1:5173/
  ➜  Network: use --host to expose
  vite:deps Crawling dependencies using entries:
  vite:deps   /Users/gustavo/Projects/experiments/vite-https/index.html +0ms
  vite:resolve 0.24ms /main.js -> /Users/gustavo/Projects/experiments/vite-https/main.js +0ms
  vite:resolve 0.37ms ./counter.js -> /Users/gustavo/Projects/experiments/vite-https/counter.js +2ms
  vite:deps Scan completed in 61.43ms: {} +54ms
  vite:deps no dependencies found by scanner +62ms

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[haoqunjiang]

https://vitejs.dev/guide/migration.html#automatic-https-certificate-generation

Automatic https Certificate Generation

A valid certificate is needed when using https. In Vite v2, if no certificate was configured, a self-signed certificate was automatically created and cached.
Since Vite v3, we recommend manually creating your certificates. If you still want to use the automatic generation from v2, this feature can be enabled back by adding @vitejs/plugin-basic-ssl to the project plugins.

import basicSsl from '@vitejs/plugin-basic-ssl'

export default {
 plugins: [basicSsl()]
}

https://vitejs.dev/config/server-options.html#server-https

server.https

• Type: boolean | https.ServerOptions

Enable TLS + HTTP/2. Note this downgrades to TLS only when the server.proxy option is also used.

The value can also be an options object passed to https.createServer().

A valid certificate is needed. For a basic setup, you can add @vitejs/plugin-basic-ssl to the project plugins, which will automatically create and cache a self-signed certificate. But we recommend creating your own certificates.

[gustavopch]

I did read the migration guide a few days ago and didn’t remember about this 🫣. Thanks for pointing out.