无Web服务器环境下HTML无法正常加载链接脚本源的问题咨询

DevOps 小满

2026-9-26

问题复现相关代码

HTML代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />
  </head>
  <body>
    <script src="sketch.js"></script>
  </body>
</html>

JavaScript代码

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
}

CSS代码

html, body {
  margin: 0;
  padding: 0;
}
canvas {
  display: block;
}

问题原因

核心原因是Chrome浏览器针对file://协议的安全限制策略：

直接双击打开本地HTML文件时，浏览器使用file://协议加载资源，此时页面的源（origin）被标记为null，不符合跨源资源共享（CORS）的同源要求。
代码中引入的p5.sound.min.js依赖Web Audio API，该API在file://协议下会因安全限制无法正常初始化，抛出未捕获的异常后会阻断p5.js的整体执行流程，setup()、draw()函数都无法正常运行，画布无法创建，因此页面无渲染内容。
部分Chrome版本还会限制file://协议下页面加载同目录本地JS、CSS文件的相关权限，也可能导致资源加载失败。

使用Xampp搭建本地服务器时页面正常加载的原因是：此时资源走http://协议传输，同源策略判定符合要求，所有依赖库的API都能正常调用，p5.js可以顺利完成初始化、创建画布、渲染内容。