particles.js页面加载异常，跨域请求报错求助

你遇到的是本地file://协议下的跨域请求限制问题，这是浏览器同源策略导致的：当你直接双击打开本地HTML文件时，浏览器使用file://协议访问资源，而particles.js通过AJAX请求加载particles.json，浏览器的安全规则禁止这种跨域操作（file协议不在允许的协议列表里），所以才抛出了那些错误。

下面给你几个可行的解决方案：

方案1：使用本地HTTP服务器（最推荐） #

这是最规范的解决方式，把本地文件放到HTTP服务器环境下访问，就能彻底避免跨域问题：

• Python简易服务器：
  • 如果你装了Python 3，打开终端/命令行，进入home.html和particles.json所在的项目根目录，运行：

    python -m http.server 8000
    

  • 如果是Python 2，运行：

    python -m SimpleHTTPServer 8000
    

  之后打开浏览器访问http://localhost:8000/home.html，粒子效果就能正常加载了。
• Node.js的http-server：
  先全局安装工具：

  npm install -g http-server
  

  进入项目根目录后运行：

  http-server
  

  按照终端提示的地址访问即可。

方案2：将JSON配置内嵌到JS代码中（无需单独JSON文件） #

你可以把particles.json里的配置内容直接写在JS代码里，不用加载外部文件，这样也能绕过跨域问题：
修改你的HTML脚本部分为：

<div id="particles-js"></div>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script>
// 直接把particles.json的内容作为对象传入
particlesJS('particles-js', {
  "particles": {
    "number": {
      "value": 80,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    // 这里粘贴你particles.json里的所有配置内容
  },
  "interactivity": {
    // 对应的交互配置
  },
  "retina_detect": true
}, function(){
  console.log('Particles config loaded successfully!');
});
</script>

这样就不需要依赖外部的particles.json文件，自然不会有跨域请求的问题。

方案3：修改浏览器安全设置（不推荐，仅临时测试用） #

如果你只是临时测试，可以修改浏览器的启动参数来允许file协议的跨域请求，但这种方法会降低浏览器的安全性，不建议日常使用：

• Windows系统（Chrome）：
  关闭所有Chrome窗口，打开命令提示符运行：

  chrome.exe --allow-file-access-from-files
  

• Mac系统（Chrome）：
  关闭所有Chrome窗口，打开终端运行：

  open -a Google\ Chrome --args --allow-file-access-from-files
  

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