Not allowed to load local resource - Electron

Question

When I run my Electron app through Visual Studio Code, the main process loads, which in turn launches the index.html page. In the index.js script I redirect the browser window to a local html file called startup.html, located in my scripts folder, which is just a sub folder of the app. The index.html page does not even launch and the app generates an error with the message:

Not allowed to load local resource

In the DevTools console it also shows the resource that it is attempting to load:

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

If I run npm start from my project's root folder, the app launches correctly and both the index.html and startup.html pages get loaded.

Visual Studio Code launches electron with:

/usr/local/bin/electron

This appears to be different than launching it with just npm start. Not sure what the difference is.

A side note: Before I added the code to launch startup.html, the app would run from Visual Studio Code. Only after adding startup.html does it not work.

What could be causing this?

Answer 1

I have a small electron app that loads the main.js and main.htm from an /app subfolder.

The main.js loads fine and the application creates a window: let mainWindow = null

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

Then I added the code to load the main.htm file that is also located in the /app subfolder.

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

However, I got the following error in the (chrome) console:

The error says,

"Not allowed to load local resource:"

That is a red herring. The error should say "cannot find local resource."

If I expand the path I finally see that it is attempting to load the main.htm file from the root directory of my project -- even though the main.js runs from the /app subfolder (which is where the main.htm file is found).

To fix the issue, I simply had to add the subfolder to the path it is was fixed:

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

Most likely this error occurs because your path to the file is incorrect, not because of user rights or whatever.

if you add this line of code you will see the path that it considers the cwd (current working directory:

console.log(`${__dirname}`)

Answer 2

Here is how i solve this in my linux environment and windows environment

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


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

for me my folder structure is

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

you can also use console.log(__dirname) to view your directory in console/terminal

Answer 3

Apparently something changed in the updated version of Electron that broke with the VS Code config settings. The documentation on how to configure VS Code has been updated at:

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

Answer 4

So this issue may occur if we trying to manipulate the contents of the page without completely loading the page. So any manipulations must be done after loading the page gracefully(after ready-to-show event).

I also got the same issue i placed the below line before loading the file.

window.webContents.openDevTools()

Example Code

// 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()