electron打包后运行应用报错Not allowed to load local resource

Electron打包后的应用程序在本地环境中运行时遇到 "Not allowed to load local resource" 错误通常是因为浏览器的安全策略限制了访问本地文件。这是出于隐私和安全考虑，防止未经用户明确许可就访问用户的文件系统。

这个错误通常发生在以下几个场景：

1. 当试图通过JavaScript的`file://`协议访问本地文件资源时，比如使用`window.open`打开本地文件。
2. 使用`webview`组件加载本地HTML文件。

解决这个问题的方法有：
- **使用绝对路径**：确保在`webview`或`file`标签中使用的是绝对路径，而不是相对路径，因为相对路径可能会被解析为当前目录。
- **设置webview属性**：在`webview`上设置`nodeIntegration`或`contextIsolation`选项来改变浏览器沙箱规则。
- **使用 Electron-specific APIs**：对于文件操作，推荐使用Electron提供的`remote`模块或专门的文件操作API，而不是直接在浏览器上下文中操作。
- **使用electron-file-access API**：这个API可以帮助管理和控制应用程序的文件访问权限。

如果问题是由于使用了不允许的第三方库或插件引起的，需要查看该库是否有对应的配置选项来调整其行为。

相关问题

electron 报错Not allowed to load local resource

当你在使用Electron开发桌面应用程序时，可能会遇到"Not allowed to load local resource"的错误。这个错误通常是由于Electron的安全策略导致的，它默认禁止加载本地资源。

Electron应用程序在默认情况下运行在一个沙盒环境中，这是为了防止恶意代码对用户系统造成损害。因此，当你尝试加载本地文件时，Electron会阻止这个操作。

要解决这个问题，你可以采取以下几种方法之一：

1. 使用`protocol`模块：你可以使用Electron的`protocol`模块来注册一个自定义协议，然后通过该协议加载本地文件。这样可以绕过默认的安全策略。以下是一个示例代码：

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

app.on('ready', () => {
  protocol.registerFileProtocol('custom', (request, callback) => {
    const url = request.url.replace('custom://', '');
    callback({ path: path.normalize(`${__dirname}/${url}`) });
  });

  const mainWindow = new BrowserWindow();
  mainWindow.loadURL('custom://index.html');
});

2. 使用`webPreferences`选项：在创建BrowserWindow时，你可以通过`webPreferences`选项来配置Web页面的行为。将`webSecurity`设置为`false`可以禁用安全策略，允许加载本地资源。以下是一个示例代码：

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

app.on('ready', () => {
  const mainWindow = new BrowserWindow({
    webPreferences: {
      webSecurity: false
    }
  });

  mainWindow.loadURL('file:///path/to/index.html');
});

请注意，禁用安全策略可能会带来一些安全风险，因此在实际开发中需要谨慎使用。

希望以上信息对你有帮助！如果你还有其他问题，请继续提问。

electron-builder 打包后 出现Not allowed to load local resource:

electron-builder打包后出现"Not allowed to load local resource"错误通常是因为应用程序试图加载本地文件，但由于安全原因，Electron不允许这样做。以下是两种可能的解决方法：

1.使用electron-builder的extraResources选项将本地文件添加到应用程序中。在package.json文件中添加以下内容：

"build": {
  "extraResources": [
    "path/to/local/file"
  ]
}

2.使用electron的remote模块从主进程中访问本地文件。在主进程中添加以下代码：

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

function createWindow () {
 const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      enableRemoteModule: true // 添加这一行
    }
  })

  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

// 在主进程中访问本地文件
const fs = require('fs')
const filePath = path.join(__dirname, 'path/to/local/file')
fs.readFile(filePath, (err, data) => {
  if (err) {
    console.error(err)
    return
  }
  console.log(data)
})