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

【问题标题】：Electron - Not allowed to load local resource电子 - 不允许加载本地资源
【发布时间】：2017-04-29 02:21:12
【问题描述】：

晚上，
我正在研究使用 electron 来打包现有的 angular2 构建。我以为我进行了试运行，但实际包装似乎失败了（请参阅下面的最后一步），我想了解原因。这就是我正在做的事情......

创建项目
使用angular-cli开始一个新项目ng new electron-ng2-cli --style=scss

编辑 package.json
进行以下添加...
"main": "main.js"

"build":
{
  "appId": "com.electrontest.testapp",
  "mac": {
    "category": "your.app.category.type"
  }
}

并将以下内容添加到scripts...

"pack": "build --dir",
"dist": "build",
"electron": "electron main.js",
"postinstall": "install-app-deps"

创建 main.js
我刚刚从 electron quick start 复制了代码。我所做的唯一更改是将index.html 的位置设置为/dist/index.html

修改基础
在index.html 中将<base="/"> 更改为<base="./">

打包代码
运行ng build。这会将所有打包的代码放入/dist

测试运行
运行npm run electron。这工作正常。一个 Electron 应用程序启动，我看到其中运行有棱角的东西。

为分发创建应用程序
运行 npm run pack 以创建打包应用程序。包装似乎没问题 - 我收到关于缺少图标的警告和我的代码未签名的警告，但我猜它们不应该是致命的？
问题是，当我现在通过双击 Finder 运行应用程序时，我在控制台中收到错误消息：Not allowed to load local resource: file:///Users/<username>/Documents/development/electron-ng2-cli/dist/mac/electron-ng2-cli.app/Contents/Resources/app.asar/dist/index.html

那么，当我使用npm run electron 时，任何人都可以解释失败的打包应用程序和运行正常的应用程序之间有什么不同吗？

我可以做些什么来解决这个问题并让应用程序正常运行？

感谢您坚持到最后。这比我想要的要长，但我希望我能解释清楚。如果您能提供帮助或提供任何建议，那就太好了 - 在您的总体方向上会考虑到许多良好的氛围:)

祝大家好运

【问题讨论】：

标签： angular electron angular-cli electron-builder

【解决方案1】：

问题可能是main.js中的路径无效，必要时更正一下

【讨论】：

天啊！太傻了……（其他 25 个人犯了同样错误的那一刻哈哈）
感谢分享。我对 EletronJS 很陌生。我尝试了几乎所有可能的方法来解决这个问题。但是看了你的意见后。我检查了我的基本设置并发现，我没有输入我的工作区的任何名称。因此，只需输入名称并编辑 testBuild.code.workspace 并重新启动 VS 代码。全部完成。
这是我的情况，我的目录中有错字:)
@WasiF 这个解决方案对我不起作用。我能够在电子 + 角度 10+ 的帮助下生成 exe，并且还能够安装它。但是，当我运行已安装的应用程序时，它会被趋势微防病毒软件阻止，在其他系统中未安装防病毒软件，这让我可以使用已安装的应用程序。我用谷歌搜索并尝试了多种解决方案，但都没有奏效。

【解决方案2】：

经过大量试验和错误，但我得到了这个工作。这里有很多我不完全理解的东西，而且很多可能是毫无意义或不好的做法，而且它可能会在下一步全部失败，但如果像我一样，你只是想克服第一个驼峰也许我找到的东西会对你有所帮助。

我通过unpackingelectron-builder 生成的app.asar 文件发现了问题。它没有包含我的dist 文件夹中的捆绑代码，而是包含所有项目代码（*.ts *.scss 等）。问题只是打包函数打包了错误的东西。
将正确的源代码放入最终应用程序的步骤很简单，但天哪，他们没有半途而废！从我在最初的问题中停止的地方开始，我做了以下......

记住我的项目结构是angular-cli设置的默认结构

电子特定文件
我将main.js 移至src 并将其名称更改为electron-main.js，只是为了避免与已经存在的main.ts 混淆.我还将它引用的路径改回/index.html。
接下来，我也在src 中创建了一个新的应用程序级别package.json，并为其提供了以下内容：

 {
  "name": "application-name",
  "description": "CLI app",
  "author": "Me me me",
  "version": "0.0.1",
  "main": "electron-main.js"
}

angular-cli.json
我将outDir 更改为build 纯粹是因为电子似乎默认输出到dist，我希望在这个阶段进行一些分离。然后我将package.json 和electron-main.js 添加到assets 数组中。

Main package.json
我删除了 "main":"main.js"，因为这里显然不再需要它。在scripts 中，我将测试命令更改为electron build，将其指向捆绑代码所在的构建文件夹。
最后，我转到build 字段并添加以下内容：

"directories": {
  "buildResources": "build",
  "app": "build"
}

现在看起来很明显。这只是告诉编译器在哪里寻找构成最终应用程序的资产。它默认为工作目录，这是我的问题。

使用此设置，我现在可以运行 ng build 将我的项目与 electron-main.js 和 package.json 捆绑到 build 文件夹中。
完成后，我可以运行 npm run electron 以快速启动测试app 或 npm run pack 构建一个可以从 Finder 启动的应用程序。

轰隆隆。任务完成。我会在十分钟后回到这里，回答我期待的另一个烦人的问题。这些天我一定很喜欢这个开发者:)

【讨论】：

除了这样做之外，还有其他方法可以解决这个问题吗？
你提供了一个很好的实践来构建一个电子应用程序。但是当尝试加载一些本地文件时，我找不到如何解决“不允许加载本地资源”的问题。你怎么能解决这个问题？
这对于最新的角度仍然有效吗？不知道你说的“最后，我去构建字段并添加了以下内容：“directories”：{“buildResources”：“build”，“app”：“build”}”
@popClingwrap 这个解决方案对我不起作用。我能够在电子 + 角度 10+ 的帮助下生成 exe，并且还能够安装它。但是，当我运行已安装的应用程序时，它会被趋势微防病毒软件阻止，在其他系统中未安装防病毒软件，这让我可以使用已安装的应用程序。我用谷歌搜索并尝试了多种解决方案，但都没有奏效。

【解决方案3】：

如果这对任何人都有帮助，我遇到的问题是我使用 process.cwd() 设置了路径：

win.loadURL(`file://${process.cwd()}/dist/index.html`);

打包时不正确，因为 main.js 文件不再位于根目录中。更改为 __dirname：

win.loadURL(`file://${__dirname}/dist/index.html`);

为我解决了这个问题。

【讨论】：

【解决方案4】：

只需更改 BrowserWindow' 选项： new BrowserWindow({ webPreferences: { webSecurity: false } }) 如果窗口的 url 指向远程源，例如 http://...，浏览器将不允许加载本地资源，除非您设置了上述选项。

【讨论】：

关闭安全性是永远的答案
@TimTheEnchanter 问题是浏览器的默认安全选项不允许加载本地资源，但 Electron 不仅仅是一个浏览器。你有别的办法吗？
来自 Electron 文档：Do Not Disable WebSecurity.

【解决方案5】：

我遇到了同样的问题，我的错误是 win.loadURL 不正确（loadURL 试图加载一个不存在的文件）。请确保您的网址正确，否则您会收到错误消息。

【讨论】：

【解决方案6】：

这适用于我在 linux 上

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

您可以添加它来查看 main.js 的目录，然后从那里导航到 index.html。 console.log(__dirname)

【讨论】：

【解决方案7】：

您只是在这里缺少'.'。你只需要放相对路径而不是绝对路径。

win.loadFile('./dist/index.html');

【讨论】：

【解决方案8】：

我目前正在运行 Angular12+，这个简单的解决方案对我有用：

"build": {
    //config
    "directories": {"output": "release/"},
    //more config
}

有了这个，带有安装程序的打包应用程序现在在 release/ 文件夹中创建，现在我可以安装它了。 dist/ 文件夹仍然存在，因为这是 Angular 构建应用程序的地方。

【讨论】：

【解决方案9】：

我遇到了同样的问题。这对我有用

// and load the index.html of the app.
  window.loadURL(url.format({
    pathname: path.join(__dirname, 'dist/index.html'), // important
    protocol: 'file:',
    slashes: true,
    // baseUrl: 'dist'
  }));

【讨论】：

url.format() 只是返回一个url字符串，没有区别。
我不知道。我和你有同样的疑问。但它奏效了。
这解决了问题，因为 url.format 正在传回 loadURL 期望的字符串。上面使用刻度而不是单引号的解决方案有效，但这也应该如此。

【解决方案10】：

当我尝试使用 electron-builder 构建我的应用程序时遇到了确切的问题...

对我有用的是在我用 ng build 构建的 package.json 文件中，然后运行 electron-builder

"scripts": {
 ...
"build-installer": "ng build --prod && electron-builder"
},

并在 index.html 中将 base href 更改为

 <base href="">

【讨论】：

【解决方案11】：

By Changing "private": true, to "private": false in pakage.json. works for me good luck.

{
  "name": "dashboard",
  "version": "0.0.0",
  "main": "main.js",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "electron": "ng build && electron .",
    "pack":"electron-packager ."
  },
  "private": false,
  "dependencies": {
    "@angular/animations": "~10.2.0",
    "@angular/cdk": "^8.2.3",
    "@angular/common": "~10.2.0",
    "@angular/compiler": "~10.2.0",
    "@angular/core": "~10.2.0",
    "@angular/flex-layout": "^9.0.0-beta.29",
    "@angular/forms": "~10.2.0",
    "@angular/material": "^8.2.3",
    "@angular/platform-browser": "~10.2.0",
    "@angular/platform-browser-dynamic": "~10.2.0",
    "@angular/router": "~10.2.0",
    "hammerjs": "^2.0.8",
    "highcharts": "^7.2.2",
    "highcharts-angular": "^2.4.0",
    "rxjs": "~6.6.3",
    "tslib": "^1.14.1",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.1002.0",
    "@angular/cli": "^10.2.0",
    "@angular/compiler-cli": "~10.2.0",
    "@angular/language-service": "~10.2.0",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "electron": "^10.1.5",
    "electron-packager": "^15.1.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^5.2.3",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "^7.0.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~4.0.5"
  }
}

【讨论】：

【解决方案12】：

这个也可以在 index.html 不存在的时候抛出。

在我的例子中，我的构建文件夹“dist”被 electron-builder 忽略并且没有正确打包到 /app 中。

See this issue for more information

【讨论】：

【解决方案13】：

我遇到了同样的问题，我通过查找路径解决了它。
例如我的错误消息是

file:///C:/Users/username/Desktop/fetni%20mohamed/electron/app/elctronapp/dist/electron-app/index.html

在 dist 文件夹中，我找到了一个名为 electronapp 的文件夹，但在路径中它是 electron-app 所以通过更改它的文件夹名称。
您可以更改 angular.json 中的输出路径，并指定与错误中显示的路径相同的名称

【讨论】：