由于cors错误而无法加载本地图像[重复]答案

【问题标题】：local images not loading due to cors error [duplicate]由于cors错误而无法加载本地图像[重复]
【发布时间】：2022-01-09 10:50:53
【问题描述】：

当我尝试将本地图像加载到我的网络项目中时，我收到了错误

Access to XMLHttpRequest at 'file:///E:/Code%20Stuff/History%20Creative%20Media%20Project/fonts/ARCADECLASSIC.TTF' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

在请求与 index.html 文件位于同一文件路径中的图像时，我遇到了 cors 错误。奇怪的是，当在 Visual Studio 代码上使用实时服务器时，我没有收到这些 cors 错误并且一切正常。

此外，我的项目中的所有其他 js 文件都可以正常加载，使用 index.html 中的 <script> 标记来加载它们

【问题讨论】：

http://localhost 或 https://localhost 被认为与 file://-URI 的来源不同，这就是原因。您需要通过http(s)://localhost 提供一切。
我应该怎么做呢？对不起，我没有那么有经验
@Josh 查看github.com/processing/p5.js/wiki/Local-server 它列出了多个选项，希望有一个更适合您首选的操作系统和鳕鱼编辑器。如果您正在制作原型/学习/测试，请在 editor.p5js.org 上创建一个帐户，然后上传您的字体，然后在 preload() 中测试加载它，然后根据需要在 setup() 或 draw() 中应用。
我希望能够在没有代码编辑器的情况下查看网页。我正在使用上述实时服务器之一（vscode 实时服务器），但是我希望能够通过单击任何计算机上的文件来即插即用。有什么建议吗？

标签： javascript cors p5.js

【解决方案1】：

如果您尝试从“file:///”访问文件，您是在另一个域中执行请求，而不是“http://localhost”。我建议您从 http 或 https 中的标准 url 访问文件。

【讨论】：

“域”在此上下文中不是准确的术语。 “域”仅适用于 Cookie，对于其他一切而言，重要的是 Origin（Origin 是 URI 方案、主机和端口的元组，而 Domain 只是主机名（子域有一些奇怪的遗留行为）。
是的，你是对的，这个概念是无论如何都必须从 http / https 中的 Web 服务器读取文件

【解决方案2】：

您可以尝试使用 --allow-file-access-from-files 来运行您的服务器，例如这个示例

$ /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome  --allow-file-access-from-files index.html

【讨论】：

--allow-file-access-from-files 只允许从file:/// URI 加载的页面加载其他file:// URI - 它不允许localhost-origin 页面加载file:// URI。在此处查看源代码：source.chromium.org/chromium/chromium/src/+/main:content/public/…