加载本地文件时出现“跨源请求仅支持HTTP.”错误

我试图加载一个3D模型，存储在我的电脑本地，到Three.js与JSONLoader, 3D模型是在同一目录下，作为整个网站。

我得到了“跨起源请求只支持HTTP.”错误，但我不知道是什么原因导致它也不知道如何修复它。

当前回答

我的水晶球显示，您正在使用文件://或C:/加载模型，这对错误消息保持真实，因为它们不是http://

因此，您可以在本地PC上安装web服务器，也可以将模型上传到其他地方，使用jsonp并将url更改为http://example.com/path/to/model

RFC-6454中将Origin定义为

   ...they have the same
   scheme, host, and port.  (See Section 4 for full details.)

因此，即使您的文件起源于同一主机(localhost)，但只要方案不同(http / file)，它们就被视为不同的起源。

其他回答

我建议您使用一个迷你服务器在本地主机上运行这类应用程序(如果您没有使用某些内置服务器)。

这里有一个非常简单的设置和运行:

https://www.npmjs.com/package/tiny-server

简单的解决方案，谁使用VS Code

我得到这个错误已经有一段时间了。大多数答案都是可行的。但我找到了一个不同的解决方案。如果你不想处理node.js或任何其他解决方案在这里，你正在使用一个HTML文件(从另一个js文件调用函数或获取json api的)尝试使用Live Server扩展。

它允许您轻松地打开一个活动服务器。因为它创建了本地主机服务器，所以问题得到了解决。您可以通过打开HTML文件并右键单击编辑器并单击open with Live Server来启动localhost。

它基本上使用http://localhost/index.html加载文件，而不是使用file://....

EDIT

不需要有.html文件。您可以使用快捷方式启动活动服务器。

按(alt+L, alt+O)打开服务器，按(alt+L, alt+C)停止服务器。[在MAC上，cmd+L, cmd+O和cmd+L, cmd+C]

希望它能帮助到别人:)

当我在浏览器上加载一个HTML文件时，我得到了这个确切的错误，该浏览器正在使用一个json文件从本地目录。在我的例子中，我能够通过创建一个允许服务器静态内容的简单节点服务器来解决这个问题。我把这个的代码留在了另一个答案。

对于Linux Python用户:

import webbrowser
browser = webbrowser.get('google-chrome --allow-file-access-from-files %s')
browser.open(url)

不可能在没有服务器的情况下加载静态本地文件(例如:svg)。如果你的机器上安装了NPM /YARN，你可以使用"http-server"来设置简单的http服务器。

npm install http-server -g
http-server [path] [options]

或者在项目文件夹中打开终端并键入“hs”。它将自动启动HTTP live服务器。

推荐文章