不允许加载本地资源 - Electron答案

【问题标题】：Not allowed to load local resource - Electron不允许加载本地资源 - Electron
【发布时间】：2018-01-08 09:22:33
【问题描述】：

当我通过 Visual Studio Code 运行我的 Electron 应用程序时，会加载主进程，然后启动 index.html 页面。在index.js 脚本中，我将浏览器窗口重定向到名为startup.html 的本地html 文件，该文件位于我的脚本文件夹中，它只是应用程序的子文件夹。 index.html 页面甚至没有启动，应用程序生成错误消息：

不允许加载本地资源

在 DevTools 控制台中，它还显示了它正在尝试加载的资源：

file:///usr/local/lib/node_modules/electron/dist/Electron.app/Contents/Resources/default_app.asar/scripts/ui/startup/startup.html

如果我从项目的根文件夹运行npm start，应用程序会正确启动，index.html 和 startup.html 页面都会加载。

Visual Studio Code 通过以下方式启动电子：

/usr/local/bin/electron

这似乎与仅使用 npm start 启动它不同。不知道有什么区别。

附注：在我添加代码以启动 startup.html 之前，应用程序将从 Visual Studio Code 运行。加了startup.html才不行。

这可能是什么原因造成的？

【问题讨论】：

标签： electron

【解决方案1】：

我有一个小型电子应用程序，它从 /app 子文件夹加载 main.js 和 main.htm。

main.js 加载正常，应用程序创建了一个窗口：让 mainWindow = null

app.on('ready', () => {
    console.log('Hello from Electron');
    mainWindow = new BrowserWindow();
})

然后我添加了代码来加载同样位于 /app 子文件夹中的 main.htm 文件。

mainWindow.webContents.loadFile("main.htm")

但是，我在 (chrome) 控制台中收到以下错误：

错误说，

"不允许加载本地资源："

这是一条红鲱鱼。错误应该是“找不到本地资源”。

如果我扩展路径，我终于看到它正在尝试从我的项目的根目录加载 main.htm 文件——即使 main.js 从 /app 子文件夹（这是 main.js 的位置）运行。 htm 文件）。

要解决此问题，我只需将子文件夹添加到已修复的路径中即可：

mainWindow.webContents.loadFile("app/main.htm")

很可能发生此错误是因为您的文件路径不正确，而不是因为用户权限或其他原因。

如果添加这行代码，您将看到它认为 cwd 的路径（当前工作目录：

console.log(`${__dirname}`)

【讨论】：

【解决方案2】：

这是我在我的 linux 环境和 windows 环境中解决这个问题的方法

newWindow.loadFile(`${__dirname}/index.html`);  //note Linux environment 


newWindow.loadFile(`file://${__dirname}/index.html`) //windows environment

对我来说，我的文件夹结构是

|__app
| |__main.js
| |__renderer.js
| |__index.html
|__package.json

您也可以使用console.log(__dirname) 在控制台/终端中查看您的目录

【讨论】：

【解决方案3】：

显然，在 Electron 的更新版本中发生了一些变化，与 VS Code 配置设置冲突。有关如何配置 VS Code 的文档已在以下位置更新：

https://electronjs.org/docs/tutorial/debugging-main-process-vscode

【讨论】：

【解决方案4】：

因此，如果我们在未完全加载页面的情况下尝试操作页面内容，则可能会出现此问题。因此，任何操作都必须在页面正常加载之后（在准备显示事件之后）完成。

我也遇到了同样的问题，我在加载文件之前放置了以下行。

window.webContents.openDevTools()

示例代码

// Issue code
window =  new BrowserWindow({width:800,height:600,parent:mainWindow})
window.webContents.openDevTools()
window.loadURL(url.format({
    pathname: path.join(__dirname,'/../views/file.html'),
    protocol: 'file',
    slashes: true
}))

// Issue Solved code 
window =  new BrowserWindow({width:800,height:600,parent:mainWindow})

window.loadURL(url.format({
    pathname: path.join(__dirname,'/../views/file.html'),
    protocol: 'file',
    slashes: true
}))
window.webContents.openDevTools()

【讨论】：