0

When i try to load local images into my web project, i am getting the error

Access to XMLHttpRequest at 'file:///E:/Code%20Stuff/History%20Creative%20Media%20Project/fonts/ARCADECLASSIC.TTF' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

im getting a cors error when requesting images that are in the same file path as the index.html file. the weird part is that when using live server on visual studio code, i don't get these cors errors and everything works fine.

also, all of the other js files in my project are loaded fine, using the <script> tag in index.html to load them

Josh
  • 95
  • 1
  • 10
  • 2
    `http://localhost` or `https://localhost` is considered a different origin to `file://`-URIs, that's why. You need to serve _everything_ through `http(s)://localhost`. – Dai Dec 03 '21 at 00:20
  • how should i go about doing that? sorry im not that experienced – Josh Dec 03 '21 at 00:21
  • @Josh Check out https://github.com/processing/p5.js/wiki/Local-server It lists multiple options, hopefully there's one that is the easier for your preferred OS and cod editor. If you're prototyping/learning/testing you make an account on https://editor.p5js.org/ , upload your font then test loading it in `preload()` and applying later in `setup()` or `draw()` as needed. – George Profenza Dec 03 '21 at 00:28
  • i want to be able to view the webpage without the code editor. i am using one of said live servers (vscode live server), however i want to be able to just plug and play by clicking on the file on any computer. any suggestions? – Josh Dec 03 '21 at 02:14

2 Answers2

-1

If you try to access file from "file:///" you are doing a request in another domain, not "http://localhost". I suggest you to access a file from a standard url in http or https.

Jacopo Bonomi
  • 394
  • 1
  • 9
  • 2
    "domain" is not the precise term in this context. "Domains" only apply to Cookies, for everything else it's the Origin that matters (an Origin is a tuple of URI scheme, host, and port, whereas Domain is just the hostname (with some weird legacy behaviour for subdomains). – Dai Dec 03 '21 at 01:24
  • Yes, you are right, the concept was that the files had to be read anyway from a web server in http / https – Jacopo Bonomi Dec 04 '21 at 14:56
-1

You can try to run your server using --allow-file-access-from-files like this example

$ /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome  --allow-file-access-from-files index.html
Olavo Mello
  • 390
  • 1
  • 8
  • `--allow-file-access-from-files` only allows pages loaded from `file:///` URIs to load other `file://` URIs - it doesn't allow `localhost`-origin pages to load `file://` URIs. See the source code here: https://source.chromium.org/chromium/chromium/src/+/main:content/public/common/content_switches.cc?q=allow-file-access-from-files%20&ss=chromium – Dai Dec 03 '21 at 01:22