PaperJS从本地文件导入SVG

Question

最近解决了PaperJS画布的一个问题，我目前正试图通过project.importSVG((函数导入SVG。

我可以成功导入一个http地址的文件，如下所示：https://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg

但是，所有本地文件上载都失败，错误代码为"0"。我认为用file://准备路径可能会有所帮助，但没有骰子

错误代码：

Error: Could not load "file:///Users/#####/Documents/####/########/green-leaf_final.svg" (Status: 0)

我使用的javascript代码是：

project.importSVG("file:///a/path/to/file/green-leaf_final.svg", function (item) {
console.log(item);
});

注意：本地文件也会出现警告：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///a/path/to/file/green-leaf_final.svg. (Reason: CORS request not http).

就我个人而言，这似乎更令人困惑——我并不是在尝试读取远程资源，但也许file://前缀是这样解释的？

Answer 1

这个问题的答案更多的是关于一般的web主机和web浏览器，而不是其他任何东西。

虽然这个答案可能不会直接告诉你为什么，但对于特定的浏览器请求类型，从远程源(甚至在本地机器中(访问的任何文件都会阻止你访问此资源，除非源中包含"CORS头"。

据推测，本地文件系统无法提供这些信息，因此您应该将文件托管在localhost或其他可用的主机上。

如果您已经在PaperJS中进行开发(因此可能将npm作为命令行工具(，并且这听起来令人生畏，那么使用npm install http-server -g并查看此处的文档，以获取有关要提供的标志以及如何启动服务器的信息。为此，您应该在操作系统命令行shell中导航到目标文件所在的所需目录，然后编写http-server -o --cors。

上面的命令应该为localhost上当前目录的所有文件提供服务。