Electron中net::ERR_INSECURE_RESPONSE错误：本地HTTPS调试跳过SSL校验

Hey there, I get it—dealing with SSL errors when testing locally is a total hassle, especially since your production setup uses a valid certificate. Let’s break down how to skip SSL checks only during local development without touching your production security.

核心思路：基于环境变量判断执行逻辑 #

First, we’ll use the NODE_ENV environment variable to detect if we’re running in development or production mode. This way, our "skip SSL" code only runs when we’re testing locally.

方案1：全局忽略证书错误（快速上手） #

This is the simplest approach—we’ll tell Chromium (the engine under Electron) to ignore all certificate errors, but only in dev mode.

Add this to your Electron main process code:

const { app, BrowserWindow } = require('electron');
const isDev = process.env.NODE_ENV === 'development';

function createWindow() {
  const mainWindow = new BrowserWindow({
    webPreferences: {
      contextIsolation: true,
      nodeIntegration: false // Keep this off in production for security
    }
  });

  // Only apply these switches in development
  if (isDev) {
    // Ignore certificate errors globally
    app.commandLine.appendSwitch('ignore-certificate-errors');
    // Allow insecure localhost (helps with self-signed certs on local)
    app.commandLine.appendSwitch('allow-insecure-localhost');
  }

  // Load your local dev URL or production URL
  mainWindow.loadURL(isDev ? 'https://localhost:3000' : 'https://your-production-ip.com');
}

app.whenReady().then(createWindow);

Pros: Super quick to implement.
Cons: Skips all certificate checks, not just localhost. Fine for dev, but don’t use this in production (our environment check ensures that).

方案2：精准跳过localhost的证书校验（推荐） #

For a more secure dev setup, we can only bypass SSL checks for localhost or 127.0.0.1, leaving other domains to use normal certificate validation.

Use the setCertificateVerifyProc method on your BrowserWindow’s webContents:

const { app, BrowserWindow } = require('electron');
const isDev = process.env.NODE_ENV === 'development';

function createWindow() {
  const mainWindow = new BrowserWindow({
    webPreferences: {
      contextIsolation: true,
      nodeIntegration: false
    }
  });

  if (isDev) {
    mainWindow.webContents.setCertificateVerifyProc((request, callback) => {
      const hostname = request.hostname;
      // Skip validation only for localhost/127.0.0.1
      if (hostname === 'localhost' || hostname === '127.0.0.1') {
        callback(0); // 0 = trust this certificate
      } else {
        callback(-2); // Use default Chromium validation logic
      }
    });
  }

  mainWindow.loadURL(isDev ? 'https://localhost:3000' : 'https://your-production-ip.com');
}

app.whenReady().then(createWindow);

Pros: Only affects your local development domain, so other external domains still get proper SSL checks even in dev.
Cons: Slightly more code, but worth it for better security practices.

确保生产环境移除这些配置 #

To make sure none of this dev-only code runs in production, set the NODE_ENV variable correctly when building:

Update your package.json scripts to set the environment:

{
  "scripts": {
    "start": "NODE_ENV=development electron .",
    "build": "NODE_ENV=production electron-builder"
  }
}

When you run npm run build, isDev will be false, so all the SSL bypass logic won’t execute—your production app will properly validate the valid SSL certificate you’re using.

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