I have a simple web page see here that attempts to implement particles.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
#particles {
background: black;
height: 100vh;
}
</style>
<body>
<div id="particles-js">
</div>
</body>
<script src=
"./assets/ParticleJS/particles.js-master/particles.min.js">
</script>
<script src=
"./assets/ParticleJS/particles.js-master/demo/js/app.js">
</script>
<script>
var particlesJS;
/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
particlesJS.load('particles-js', 'http://localhost/jsonconfig/particles/particlesjs-config.json', function() {
console.log('callback - particles.js config loaded');
});
</script>
</html>
The above code is me creating a VirtualDirectory on my localhost default web site in iis and pointing that VirtualDirectory to the file where my JSON is stored. I did this trying to get around a CORS error by making it point to HTTP:// instead of file://.
I get the below error.
my original solution pointed the where a copy of the JSON was in my root directory.
<script>
var particlesJS;
/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
particlesJS.load('particles-js', './particlesjs-config.json', function() {
console.log('callback - particles.js config loaded');
});
</script>
I got a CORS error
EDIT I forgot to include I also tried this to get around the CORS error
<script>
var particlesJS;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
particlesJS.load('particles-js', this.responseText, function() {
console.log('callback - particles.js config loaded');
});
}
};
xhttp.open('GET', 'http://localhost/jsonconfig/particles/particlesjs-config.json');
xhttp.send();
</script>
I received a similar error with CORS
I just can't seem to get around this cors error, any and all help would be appreciated.
Resources I accessed:
https://github.com/VincentGarreau/particles.js/
particles.js not loading on page correctly
https://www.geeksforgeeks.org/how-to-use-particle-js-in-javascript-project/
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors
https://docs.microsoft.com/en-us/answers/questions/314369/xmlhttprequest-getting-blocked-by-cors-policy-in-e.html
https://community.intersystems.com/post/access-xmlhttprequest-httplocalhost52773irisvscodeapptest-origin-null-has-been-blocked-cors
https://docs.microsoft.com/en-us/iis/extensions/cors-module/cors-module-configuration-reference
https://www.w3.org/wiki/CORS_Enabled#For_IIS7
EDIT I added this web.config file to the root directory of the iis site I was using to host the .json file.
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
</customHeaders>
</httpProtocol>
</system.webServer>
</configuration>
I still get a CORS error when trying to access the config file from http://localhost/jsonconfig/particles/particlesjs-config.json.
I even tried for giggles including the web.config file in the directory of the site I am trying to load the config.json file for.