particles.js在Chrome不显示且报404配置找不到错误如何解决

• particles.js抛出404错误是因为代码发起了XMLHttpRequest请求外部粒子配置文件，但请求失败，两种常见场景会导致你遇到的Safari正常、Chrome异常的情况：
  1. 初始化方法用了particlesJS.load()并传入了JSON配置文件路径，要么路径填写错误找不到文件，要么你是直接通过file://本地文件协议打开HTML，Chrome的安全策略默认禁止跨域请求本地文件，会拦截合法的本地JSON请求返回404状态，而Safari对本地文件的XHR请求限制更宽松，所以可以正常加载。
  2. 你误删了配置文件或者配置文件部署时路径不对，Safari刚好有缓存所以能正常显示，Chrome没有缓存所以加载失败。

• 方案1（推荐，无额外依赖）：直接在app.js中用配置对象初始化粒子，无需请求外部JSON文件
  将你app.js中的初始化代码替换为直接传入配置对象的写法，示例如下：

  // app.js 正确初始化写法
  particlesJS("particles-js", {
    // 此处直接粘贴你原有的所有粒子配置参数即可
    "particles": {
      "number": {
        "value": 80,
        "density": {
          "enable": true,
          "value_area": 800
        }
      }
      // 其余配置按你的需求填写
    },
    "interactivity": {
      // 交互配置
    }
  })
  

  不要使用需要传入JSON路径的particlesJS.load()写法，避免发起额外的XHR请求。

• 方案2：如果需要保留外部JSON配置文件的写法，用本地静态服务启动项目
  不要直接双击打开本地HTML文件，使用本地静态服务器工具启动项目，通过http://localhost域名访问即可绕过Chrome的本地文件请求限制，常见的实现方式包括VS Code的Live Server插件、Node.js的http-server包、Python的http.server模块等。

内容的提问来源于stack exchange，提问作者ChaoticNebula