Vite-React网络访问出现net::ERR_SSL_PROTOCOL_ERROR问题求助

方案一：保留HTTPS服务，同时支持localhost和局域网IP访问 #

1. 修改Vite配置文件，添加server.host配置，让服务绑定所有网络接口：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import basicSsl from '@vitejs/plugin-basic-ssl';

export default defineConfig({
  plugins: [react(), basicSsl()],
  server: {
    host: '0.0.0.0',
    port: 5173
  }
});

2. 访问localhost时必须用https://localhost:5173/，不能再用HTTP。如果浏览器提示证书不安全，手动信任这个自签名证书即可。
3. 局域网IP访问保持使用https://192.168.101.222:5173/，就能正常打开页面。

方案二：恢复HTTP服务，解决局域网IP的SSL协议错误 #

如果不需要HTTPS服务，问题多半是浏览器对该局域网IP启用了HSTS强制HTTPS访问，按以下步骤修复：

• 打开浏览器的HSTS设置（以Chrome为例，直接输入chrome://net-internals/#hsts）；
• 在「Delete domain security policies」输入框中填入192.168.101.222，点击「Delete」；
• 重启浏览器后，用http://192.168.101.222:5173/访问即可恢复正常，同时http://localhost:5173/也能继续使用。

内容的提问来源于stack exchange，提问作者bharatadk