Electron+React应用加载HTTPS链接出现白屏问题求助

这是因为React在HTTPS=true启动时生成的是自签名SSL证书，而Electron内置的Chromium内核默认会拒绝这类未被系统信任的证书，导致页面加载失败白屏——Chrome浏览器会提示你手动确认信任证书，所以能正常访问，但Electron默认不会弹出这个提示。

下面给你几个实用的解决方案，按需选择：

方案1：开发环境快速禁用证书验证（最简单） #

直接在创建BrowserWindow时添加webPreferences配置，跳过证书错误检查。注意这个方法只适合开发环境，生产环境绝对不能用，会有安全风险：

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    titleBarStyle: "hidden",
    width: 1000,
    height: 700,
    webPreferences: {
      // 开发环境下忽略证书错误
      ignoreCertificateErrors: true
    }
  });
  mainWindow.webContents.openDevTools();
  mainWindow.loadURL("https://localhost:3000");
});

方案2：针对性信任本地证书（更安全） #

如果不想全局禁用证书验证，可以通过监听Electron的certificate-error事件，只信任localhost:3000的自签名证书：

// 在ready事件前添加证书信任逻辑
app.on('certificate-error', (event, webContents, url, error, certificate, callback) => {
  // 仅允许本地开发的HTTPS链接
  if (url.startsWith('https://localhost:3000')) {
    event.preventDefault(); // 阻止默认的错误行为
    callback(true); // 信任该证书
  } else {
    callback(false); // 其他链接仍按默认逻辑处理
  }
});

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    titleBarStyle: "hidden",
    width: 1000,
    height: 700,
  });
  mainWindow.webContents.openDevTools();
  mainWindow.loadURL("https://localhost:3000");
});

方案3：生成系统信任的本地证书（最贴近生产环境） #

用mkcert工具生成真正被系统信任的SSL证书，这样Electron和浏览器都无需额外配置：

1. 安装mkcert（根据你的系统选择命令）：

   • macOS: brew install mkcert
   • Windows: 用Chocolatey安装choco install mkcert
   • Linux: sudo apt install mkcert

2. 生成并信任本地根CA：

   mkcert -install
   

3. 在你的React项目根目录生成localhost证书：

   mkcert localhost
   

   执行后会得到localhost.pem（证书文件）和localhost-key.pem（密钥文件）。

4. 修改package.json中的start脚本，指定证书路径：

   "scripts": {
     "start": "HTTPS=true SSL_CRT_FILE=./localhost.pem SSL_KEY_FILE=./localhost-key.pem react-scripts start"
   }
   

启动React后，https://localhost:3000的证书已经被系统信任，Electron直接加载就不会出现白屏问题了。

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