HTTPS React应用无法连接HTTPS后端Socket.io服务器问题

问题原因 #

浏览器对HTTPS证书的校验逻辑比Postman严格：

• Postman默认会跳过部分证书合法性校验（比如CN不匹配），因此能正常触发后端连接日志
• 浏览器要求证书的**Common Name(CN)或Subject Alternative Name(SAN)**必须与访问域名（此处为localhost）完全匹配
• 你前后端各自生成证书，可能后端生成的证书未将localhost设为CN或包含在SAN中；或者自签名CA未被浏览器信任，导致证书校验失败

解决方案 #

方案1：统一使用同一套证书（推荐） #

避免前后端各自生成证书导致的不一致问题：

1. 删除/frontend/certs目录下的所有证书文件
2. 将后端/backend/certs目录下的ca.pem、cert.pem、cert.key复制到前端/frontend/certs目录
3. 修改后端server.js的HTTPS配置，确保指定正确证书路径：

const fs = require('fs');
const https = require('https');
const express = require('express');
const { Server } = require('socket.io');

const app = express();
// 配置HTTPS证书
const httpsOptions = {
  key: fs.readFileSync('./certs/cert.key'),
  cert: fs.readFileSync('./certs/cert.pem'),
  ca: fs.readFileSync('./certs/ca.pem')
};
const server = https.createServer(httpsOptions, app);

// 配置Socket.IO跨域
const io = new Server(server, {
  cors: {
    origin: "https://localhost:5173", // 前端Vite默认地址，根据实际修改
    methods: ["GET", "POST"]
  }
});

// 监听连接事件
io.on('connection', (socket) => {
  console.log('用户已连接：', socket.id);
  // 其他业务逻辑
});

server.listen(9000, () => {
  console.log('HTTPS Socket.IO服务器运行在：https://localhost:9000');
});

4. 修改前端vite.config.js，使用后端的证书：

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

export default defineConfig({
  plugins: [react()],
  server: {
    https: {
      key: fs.readFileSync('./certs/cert.key'),
      cert: fs.readFileSync('./certs/cert.pem'),
      ca: fs.readFileSync('./certs/ca.pem')
    },
    port: 5173
  }
});

5. 将ca.pem安装到浏览器的受信任根证书颁发机构：
   • 双击ca.pem文件，选择“安装证书”
   • 选择“当前用户”或“本地计算机”，点击下一步
   • 选择“将所有证书放入下列存储”，点击“浏览”，选中“受信任的根证书颁发机构”
   • 完成安装后重启浏览器

方案2：生成包含localhost的合法证书 #

如果需要前后端各自生成证书，确保证书的CN和SAN包含localhost：

1. 在后端/backend/certs目录执行以下命令生成证书：

# 生成CA证书
mkcert create-ca --organization "MyLocalCA" --country "CN" --common-name "LocalRootCA"
# 生成服务器证书，指定域名和IP
mkcert create-cert --domain "localhost" --ip "127.0.0.1" --common-name "localhost"

2. 前端/frontend/certs目录执行同样的命令生成相同配置的证书
3. 按照方案1的步骤5，将CA证书安装到浏览器信任根目录

方案3：临时调试方案（仅开发环境用） #

强制使用WebSocket传输并跳过证书校验（生产环境绝对禁止）：

import { io } from 'socket.io-client';

// 前端连接代码
const socket = io('https://localhost:9000', {
  transports: ['websocket'], // 强制使用WebSocket传输
  rejectUnauthorized: false // 跳过证书校验，仅开发调试用
});

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