如何在Electron中为代理设置用户名和密码

代理配置后页面无内容、无报错，绝大多数是因为Electron默认不会自动响应代理返回的407身份认证请求，请求被挂起导致的，可按照以下两种方案实现配置：

方案1：监听session的login事件（官方推荐，适配Electron 10+所有版本） #

该方案安全性更高，支持动态切换代理，生产环境优先使用。
在主进程中写入以下代码：

const { app, BrowserWindow, session } = require('electron')

app.whenReady().then(async () => {
  // 1. 提前监听代理认证请求，必须放在窗口创建、代理配置之前
  session.defaultSession.on('login', (event, webContents, details, authInfo, callback) => {
    event.preventDefault()
    // 仅处理代理类型的认证请求，避免误提交其他站点的登录凭据
    if (authInfo.isProxy) {
      // 替换为实际的代理用户名、密码
      callback('PROXY_USERNAME', 'PROXY_PASSWORD')
    }
  })

  // 2. 配置代理地址规则
  await session.defaultSession.setProxy({
    // 按实际代理类型填写，支持http、https、socks5等
    proxyRules: 'http://PROXY_HOST:PROXY_PORT',
    // 不需要走代理的地址规则，<local>代表本地地址
    proxyBypassRules: '<local>'
  })

  // 3. 代理配置生效后再创建窗口加载页面
  const mainWindow = new BrowserWindow({
    width: 1200,
    height: 800
  })
  mainWindow.loadURL('TARGET_WEBSITE_URL')
})

注意事项：

• 如果应用使用了自定义session，需要对应监听自定义session的login事件，不要监听默认的defaultSession
• callback如果不传任何参数，代表拒绝认证，会直接导致页面加载失败

方案2：命令行参数配置（适合固定代理的简单场景） #

不需要监听事件，直接在应用启动前把代理凭据拼接到代理地址中，写入命令行参数即可：

const { app, BrowserWindow } = require('electron')

// 必须放在app.whenReady()之前执行
app.commandLine.appendSwitch('proxy-server', 'http://PROXY_USERNAME:PROXY_PASSWORD@PROXY_HOST:PROXY_PORT')
// socks5代理写法：app.commandLine.appendSwitch('proxy-server', 'socks5://PROXY_USERNAME:PROXY_PASSWORD@PROXY_HOST:PROXY_PORT')

app.whenReady().then(() => {
  const mainWindow = new BrowserWindow({
    width: 1200,
    height: 800
  })
  mainWindow.loadURL('TARGET_WEBSITE_URL')
})

注意事项：

• 如果用户名、密码包含特殊字符（@、:、/等），需要先做URL编码再写入，否则会出现地址解析错误
• 凭据会明文出现在进程命令行参数中，安全性较低，不推荐生产环境使用

问题排查 #

• 打开窗口的开发者工具，查看Network面板的请求状态，如果返回407代表认证信息未正确提交，优先检查login事件监听时机是否晚于窗口创建
• 提前在普通浏览器中测试代理地址、端口、凭据的可用性，排除代理本身不可用的问题
• 若使用Electron 10以下的旧版本，setProxy需要使用回调写法而非Promise写法，对应调整代码即可

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