Electron加载远程WebApp并本地读取打包大视频的问题咨询

嘿，这个问题我之前帮朋友解决过类似的——你虽然关了webSecurity，但Electron里让远程网页访问本地文件还有几个关键的配置和路径处理坑要踩，我给你一步步捋清楚：

仅仅关闭webSecurity还不够，Electron默认会限制远程页面访问本地文件系统，你需要在主进程的窗口配置里补全几个关键参数：

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

function createMainWindow() {
  const mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      webSecurity: false, // 你已经配置的项
      allowFileAccess: true, // 核心：允许远程页面读取本地文件系统
      allowRunningInsecureContent: true, // 如果你的WebApp是HTTP协议，需要加这个；HTTPS可以忽略
      contextIsolation: false, // 临时关闭隔离方便调试，后续可以用preload脚本替代
      nodeIntegration: true // 允许渲染进程直接调用Node.js API（自己用的话没问题）
    }
  });

  // 加载你的远程WebApp
  mainWindow.loadURL('https://your-webapp-host.com');
}

app.whenReady().then(createMainWindow);

直接在远程网页里写file:///xxx很容易出现路径解析错误（比如打包后应用路径变化、编码问题），更稳妥的方式是在Electron主进程注册一个自定义协议，映射到本地视频目录：

// 在app.whenReady()里添加协议注册逻辑
app.whenReady().then(() => {
  // 注册local-video协议，指向打包后的videos目录
  protocol.registerFileProtocol('local-video', (request, callback) => {
    // 去掉协议前缀，解码URL中的特殊字符
    const videoFileName = decodeURIComponent(request.url.replace('local-video://', ''));
    // 拼接本地视频的绝对路径
    const videoPath = path.join(app.getAppPath(), 'videos', videoFileName);
    callback({ path: videoPath });
  });

  createMainWindow();
});

之后在你的远程WebApp里，视频标签就可以这么写：

<video src="local-video://exhibition-video-01.mp4" controls></video>

如果用electron-builder或electron-packager打包，必须把视频目录加入打包范围，否则打包后找不到文件。比如在package.json的build字段里配置：

{
  "build": {
    "files": [
      "**/*",
      "videos/**/*" // 把videos目录下所有文件打包进去
    ]
  }
}

如果不想关闭contextIsolation和nodeIntegration，可以用Electron的preload脚本+IPC通信来传递视频路径，更符合Electron的安全规范：

1. 新建preload.js：

const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electronVideoAPI', {
  getVideoPath: (fileName) => ipcRenderer.invoke('get-local-video-path', fileName)
});

2. 主进程里添加IPC处理：

const { ipcMain } = require('electron');

ipcMain.handle('get-local-video-path', (event, fileName) => {
  return path.join(app.getAppPath(), 'videos', fileName);
});

3. 远程WebApp里调用API加载视频：

async function loadLocalVideo() {
  const videoPath = await window.electronVideoAPI.getVideoPath('exhibition-video-01.mp4');
  const videoElement = document.querySelector('video');
  videoElement.src = `file://${videoPath}`;
}

按照上面的步骤来，应该就能解决file://的GET错误了。核心就是让Electron明确允许远程页面访问本地文件，同时避免直接使用file://带来的路径解析和跨域残留问题。

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