配置HTTPS后Vite与WebSocket连接失败问题求助（ASP.NET+React+TS）

核心问题分析 #

你遇到的问题本质是HTTPS环境下的混合内容限制：前端服务启用HTTPS后，HMR配置却使用了对应HTTP的ws协议，Chrome等浏览器会严格阻止这种跨协议的WebSocket连接；而Firefox对localhost域名的混合内容限制更宽松，因此未触发错误。同时手动指定的HMR参数可能与Vite自动生成的配置冲突，导致连接异常。

具体修复步骤 #

1. 修正HMR协议为wss #

将HMR的通信协议改为对应HTTPS的wss，匹配当前的加密环境：

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

export default defineConfig({
  plugins: [react()],
  server: {
    port: 5005,
    https: {
      key: './ssl/localhost.key',
      cert: './ssl/localhost.crt'
    },
    strictPort: true,
    hmr: {
      host: "localhost",
      protocol: "wss" // 从ws改为wss，匹配HTTPS
    },
  },
});

2. 信任本地SSL证书 #

Chrome等浏览器默认不信任自签名的localhost证书，需手动导入信任：

• 打开Chrome，输入chrome://settings/certificates
• 切换到「受信任的根证书颁发机构」标签
• 导入你的localhost.crt文件，按提示完成信任配置
• 重启浏览器生效

3. 推荐：让Vite自动推导HMR配置（更可靠） #

如果手动配置仍有问题，可完全移除HMR的手动参数，让Vite根据server的HTTPS配置自动生成正确的WebSocket连接参数：

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

export default defineConfig({
  plugins: [react()],
  server: {
    port: 5005,
    https: {
      key: './ssl/localhost.key',
      cert: './ssl/localhost.crt'
    },
    strictPort: true,
    // 移除手动hmr配置，由Vite自动处理
  },
});

额外排查点 #

• 查看浏览器控制台的Networks标签，确认WebSocket请求的具体错误（如证书不匹配、连接被拒绝）
• 若前后端存在跨域，确认后端CORS配置允许wss://localhost:5005的请求
• 检查SSL证书是否针对localhost生成，避免域名不匹配问题

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