加载particles.js的配置

编程问答 2022-04-28

问题描述

我有一个简单的网页，请参见此处尝试实现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>

上面的代码是我在 iis 中的本地主机默认网站上创建一个 VirtualDirectory 并将该 VirtualDirectory 指向存储我的 JSON 的文件。我这样做是为了解决 CORS 错误，将其指向 HTTP:// 而不是 file://。

我收到以下错误。

enter image description here

我的原始解决方案指出了 JSON 副本在我的根目录中的位置。

<script>
    var particlesJS;
    
    /* particlesJS.load(@dom-id,'./particlesjs-config.json',function() {
    console.log('callback - particles.js config loaded');
    });

</script>

我收到 CORS 错误

enter image description here

编辑 我忘了包括我也试过这个来解决 CORS 错误

<script>
    var particlesJS;
    
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
                /* particlesJS.load(@dom-id,@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>

我收到了与 CORS 类似的错误

enter image description here

我似乎无法解决这个 cors 错误，我们将不胜感激。

我访问的资源：
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

编辑 我将此 web.config 文件添加到我用来托管 .json 文件的 iis 站点的根目录中。

  <?xml version="1.0" encoding="utf-8"?>
  <configuration>
    <system.webServer>
      <httpProtocol>
        <customHeaders>
          <add name="Access-Control-Allow-Origin" value="*" />
        </customHeaders>
      </httpProtocol>
    </system.webServer>
  </configuration>

尝试从 http://localhost/jsonconfig/particles/particlesjs-config.json 访问配置文件时，我仍然收到 CORS 错误。

我什至尝试在我尝试加载 config.json 文件的站点目录中包含 web.config 文件。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptjsonparticles.jsvirtual-directory