[Solved] CORS Header if HTML file gets loaded via file:///foo.html?

Question

If your problem is entry, then use one of the many fiddle tools available.

jqfiddle has an html, css and a jquery part you can fill in. It should support all the basic examples you need, and also some advanced. But since we are talking “entry level” then this should suffice to show what you can do. And then get into how to set all this up locally or on a server later.

You could also just setup a single server with userfolders they could upload too via ftp locally and then host those user folders (that would require more setup on your part however).

Or use something like github pages to host the content. Getting students that want to learn to code, involved in a platform like github, is also great for exploration and learning.

Update:
After OPs answer to his own question i wanted to what the actual problem was to this answer:

  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous">

The above was added to the tag where the file was loaded.

This is a security feature used when loading external resources, called: Subresource Integrity

The content of the integrity attribute needs to match a hash generated from the file being loaded, and is really only used when your code and the resource are in different locations (Cross Origin) it protects your site against the file being changed on the third-party site.

The hash ensures that the code you expect is the one being loaded from the third-party, if it has changed (been hacked) the code won’t be executed on your page.

So in your local case you would have to generate a new hash from the file content, every time your code changed, and put that into the integrity attribute, this doesn’t really make sense if the resources are at the same location, since an attacker could just modify your site instead of the actual script file.

Futher update:
If you want to test something from a file it should be possible with a simple html file like the following, it also loads the script from a cdn with SRI without a problem.

<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.js"
  integrity="sha256-fNXJFIlca05BIO2Y5zh1xrShK3ME+/lYZ0j+ChxX2DA="
  crossorigin="anonymous"></script>
</head>
<body>
<h1>Hello World!</h1>

<script type="text/javascript">
  $("body").append("<span>I was added from jquery script!</span>");
</script>

The script is copy/pasted directly from the snippet provided from jquery’s cdn

Accepted Answer