Https dev server locks mobile Safari in infinite redirect loop

Describe the bug

Using https causes infinite redirecting behaviour in iOS Safari

Reproduction

1. Set the server to use https
2. Visit the dev site using iOS Safari and one of the network IPs
3. Confirm the “Visit unsecure web site”
4. Site keeps re-loading rapidly, switching between site URL and certificate warning URL

System Info

• vite version: 2.0.4
• Operating System: MacOS 11.2.1, iOS 14.4
• Node version: 14.0.0
• Package manager (npm/yarn/pnpm) and version: Yarn 1.22.5

Logs (Optional if provided reproduction)

1. Run yarn dev using https

[Kashuab]

Here’s a workaround (Mac specific instructions):

1. Install mkcert
2. Generate a cert $ mkcert localhost <your local IP, i.e. 192.168.1.51>
3. Point vite to the generated key and cert .pems:

{
  // ... your other config ...
  server: {
    https: {
      key: './key.pem',
      cert: './cert.pem',
    },
    host: '0.0.0.0',
  }
}

1. Locate mkcert’s rootCA.pem file by running the following command:

$ mkcert -CAROOT

1. Copy the outputted path, open finder, go to Go > Go to folder, paste in the path and hit “Go”
2. Unlock your iDevice
3. Airdrop the rootCA.pem file to your iDevice
4. Open your settings app, at the top you should see an option to install the downloaded profile
5. When done, go to Settings > General > About > Certificate Trust Settings (at the bottom) > Toggle full trust for the mkcert root certificate

You should now be able to view your local app by entering your local IP in safari, i.e. https://192.168.1.51:4000

[sapphi-red]

I confirmed this still happens. I tested with 2.0.4 and 2.3.0 and 2.9.9 and 3.0.0-alpha.7.