Paper.js外部Paperscript文件在Chrome中无法加载的问题求助

核心原因：CORS限制与本地文件协议（file://）的冲突 #

你遇到的CORS错误是关键——当直接用Chrome打开本地HTML文件时，浏览器使用的是file://协议，而浏览器的安全策略会阻止这种协议下的XMLHttpRequest（XHR）请求。Paper.js加载type="text/paperscript"的脚本时，正是通过XHR去获取script.js的内容，所以被浏览器拦截了，这就是为什么script.js在Sources面板里缺失的原因。

另外还有几个小问题需要修正：

• 你的HTML里引用了paper-full.min.js，但文件结构里只有paper-core.js——paper-core.js不包含PaperScript的解析器，必须用完整的paper-full.min.js才能支持text/paperscript类型的脚本。
• script.js里把project.importSVG放在view.onFrame里会导致每帧都加载一次SVG，不仅效率低，还可能引发错误；同时SVG的路径../mario.svg是错误的（会跳出项目根目录）。

解决方案步骤 #

1. 用本地HTTP服务器运行项目（解决CORS问题）

不要直接双击打开html.html，而是启动一个本地HTTP服务器来托管你的项目：

• 如果安装了Python，在项目根目录（Test文件夹）打开终端，运行：
  • Python 3：python -m http.server 8000
  • Python 2：python -m SimpleHTTPServer 8000
• 然后在Chrome里访问http://localhost:8000/html.html，这样就使用http协议，浏览器不会触发CORS限制。

2. 修正Paper.js文件引用

确保你的scripts文件夹里有paper-full.min.js（可以从Paper.js官方渠道下载完整版本），如果只有paper-core.js，要么替换成full版本，要么把脚本改成普通JavaScript（去掉type="text/paperscript"，改用手动初始化方式）。

3. 修正script.js的代码

把SVG加载逻辑移到初始化位置，并且修正路径：

// 初始化时加载一次SVG，而不是每帧重复加载
project.importSVG('./mario.svg', function(svgItem) {
    // 可选：调整SVG的位置到画布中心
    svgItem.position = view.center;
    // 如果需要调整大小，可以用svgItem.scale(0.5)之类的方法
});

// 如果需要帧动画逻辑，再保留view.onFrame
view.onFrame = function(event) {
    // 这里写每帧要执行的动画代码，比如移动SVG等
    // svgItem.position.x += 1;
};

额外可选方案：改用普通JavaScript写法 #

如果不想用PaperScript，也可以改用普通JavaScript写法，这样更灵活，也能避免PaperScript加载时的XHR问题：
修改HTML的脚本引用：

<script src="./scripts/paper-core.js"></script>
<script src="./scripts/script.js"></script>

然后script.js里手动初始化Paper.js：

// 初始化画布
paper.setup('myCanvas');

// 加载SVG
paper.project.importSVG('./mario.svg', function(svgItem) {
    svgItem.position = paper.view.center;
});

// 帧动画
paper.view.onFrame = function(event) {
    // 动画逻辑
};

// 渲染视图
paper.view.draw();

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