Cannot link script source in HTML without web server

Question

In this link, https://editor.p5js.org/, there are three files, html, javascript and css. I duplicate those files on my own computer and then run it with Chrome browser. It does not render anything. However, when I run this page with a web server, Xampp, it runs successfully. What are the reasons?

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <script src="sketch.js"></script>
  </body>
</html>

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
}

html, body {
  margin: 0;
  padding: 0;
}
canvas {
  display: block;
}

Browsers aren't permitted to traverse your local filesystem by default. When not being served by a proper HTTP server, `` will refer to a local file, which isn't allowed. Your developer console should highlight this for you. — esqew, Nov 16 '21 at 13:17
"It does not render anything" - what happens instead? Is there anything written to your browser's error console? Also, if this question is really related to PHP, please share the code involved — Nico Haase, Nov 16 '21 at 14:41
@NicoHaase I run the code again and it turns out there are no problems. The previous problem came from adding the ml5js built on the top of tensorflow. The browser renders `Not allowed to load local resource: blob:null/43ac3c4d-b1b0-47c6-ae78-c20517b70336`. It seems to open the forbidden resource of Chrome. I find the same problem in this [link](https://stackoverflow.com/questions/41648553/why-i-got-not-allowed-to-load-local-resource-error-on-chrome-when-i-use-blob-t). However, I still do not understand why the problems solved when I open it with web server — Cường Đặng Cao, Nov 17 '21 at 03:03
Does this answer your question? ["Cross origin requests are only supported for HTTP." error when loading a local file](https://stackoverflow.com/questions/10752055/cross-origin-requests-are-only-supported-for-http-error-when-loading-a-local) — ggorlen, Jul 22 '22 at 14:54
Please post any console errors. Those probably tell you it's a CORS issue. — ggorlen, Jul 22 '22 at 14:55

score 0 · Accepted Answer · answered Nov 16 '21 at 14:39

0

Put your <script> tag into the head tag of your html https://p5js.org/get-started/ page

like :

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.js"></script>
    <script src="sketch.js"></script>
  </head>
  <body>
    <main>
    </main>
  </body>
</html>

It worked for me over Google Chrome

answered Nov 16 '21 at 14:39

t.bagieu

26
4

it doesn't work for me – Cường Đặng Cao Nov 16 '21 at 16:13
is your sketch.js file is located on the same folder as the html file ? Try using the default example from p5js.org website. Dont took care of your css for now – t.bagieu Nov 16 '21 at 18:59
I can run it now. Thank you – Cường Đặng Cao Nov 17 '21 at 02:43
This doesn't really answer the question, and whether the script is in the head or body shouldn't matter--in fact, putting it at the end of the body is customary so the DOM is sure to be loaded by the time it runs. The reason is probably CORS, as the other answer mentions. – ggorlen Jul 22 '22 at 14:53

score 0 · Answer 2 · answered Nov 25 '21 at 09:55

It MIGHT be CORS, CORS is usually for images & sound files & stuff like that, but maybe it's different in google chrome, you should google how to disable it in google chrome and see what works for you, i think it's something with the shortcut, not sure. Browser should also throw a crap tone of things into your console about CORS.

otherwise maybe your files are in wrong locations, everything should be under a single folder:

jsProject:
   sketch.js
   index.html
   style.css

Cannot link script source in HTML without web server

2 Answers2