5

When I try to link my html page to my javascript files in my express app, I get the error above in my developer tools. I am running this in an express app with an hbs rendering engine on my local machine. The code snippet looks like this

html 

<script type="text/javascript" src="file:///public/javascripts/jquery/jquery-2.2.4.min.js"></script>
<script type="/javascript" src="file:///public/javascripts/receiver.js"></script>
<script type="text/javascript" src="file:///public\javascripts\jquery-2.2.4.min.map"></script>

this is the part from app.js that sets the view engine 

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');

and when I check the developer tools, I get this console error

Not allowed to load local resource: file:///public/javascripts/jquery/jquery-2.2.4.js (index) :1 Not allowed to load local resource: file:///public/javascripts/receiver.js (index) :1 Not allowed to load local resource: file:///public/javascripts/jquery-2.2.4.min.map

Why does the program not access my javascripts?

Sparksido
  • 585
  • 2
  • 11
  • 22
  • 3
    You need a webserver, you can't run your website of the `file://` protocol. – adeneo Jun 07 '16 at 22:29
  • but if I remove it I get a 404 error – Sparksido Jun 07 '16 at 22:34
  • you need to post your express node code so we can see how you have configured your webserver to read your static files. – Garuuk Jun 07 '16 at 22:35
  • @Garuuk Other than setting the view engine to hbs (see edit above), I haven't edited the express file at all – Sparksido Jun 07 '16 at 22:42
  • Again, you can't use a `file://` protocol, you'll end up with same-origin errors. If you're running a webserver in Node, just stop using `file://` and your good. – adeneo Jun 07 '16 at 22:45
  • `GET http://localhost:3000/public/javascripts/receiver.js (index):36 GET http://localhost:3000/public/javascripts/jquery-2.2.4.min.map (index):34 GET http://localhost:3000/public/javascripts/jquery/jquery-2.2.4.js 404 (Not Found)` @adeneo I got rid of the file:// and now I get this – Sparksido Jun 07 '16 at 22:48
  • Now it can't find the files, which is an improvement, and either means the files aren't there, or you're missing a static routing in your Node app. – adeneo Jun 07 '16 at 22:51
  • Possible duplicate of [Cannot open local file - Chrome: Not allowed to load local resource](https://stackoverflow.com/questions/39007243/cannot-open-local-file-chrome-not-allowed-to-load-local-resource) – Liam Aug 22 '19 at 12:27

1 Answers1

11

First.

Do not load files with file://. Just enter the relative path. Do not load javascript source maps via the script tag. You can add this line at the and of the javascript file: //# sourceMappingURL=/path/to/script.js.map

Second.

You have this little line of code in you express app: app.use(express.static('public'));. If not, add it. The server knows the public path. So you don´t have to write public/

If this is your structure:

  • server.js
  • public/
    • index.html
    • javascripts/
    • receiver.js
    • jquery/
      • jquery-2.2.4.min.js

Write this into your html or handlebars file.

<script type="text/javascript" src="javascripts/jquery/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="javascripts/receiver.js"></script>
Philip
  • 3,486
  • 1
  • 24
  • 37