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

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


当前回答

简单的解决方案,谁使用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]

希望它能帮助到别人:)

其他回答

我也能够在使用以下href的锚标记时重新创建此错误消息:

<a href="javascript:">示例:一个标签</a> .

在我的情况下,一个标签被用来获得“指针光标”和事件实际上是由一些jQuery点击事件控制。我删除了href并添加了一个应用的类:

光标:指针;

我的水晶球显示,您正在使用文件://或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),它们就被视为不同的起源。

对于Linux Python用户:

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

对于那些在Windows上没有Python或Node.js的人,仍然有一个轻量级的解决方案:Mongoose。

您所要做的就是将可执行文件拖到服务器的根目录,然后运行它。一个图标将出现在任务栏中,它将导航到默认浏览器中的服务器。

此外,Z-WAMP是一个100%可移动的WAMP,在一个文件夹中运行,这是很棒的。如果你需要一个快速的PHP和MySQL服务器,这是一个选择。不过从2013年起就没有更新过。现代的替代方案是Laragon或WinNMP。我还没有对它们进行测试,但它们是可移植的,值得一提。

此外,如果你只想要绝对的基础(HTML+JS),这里有一个小的PowerShell脚本,不需要安装或下载任何东西:

$Srv = New-Object Net.HttpListener;
$Srv.Prefixes.Add("http://localhost:8080/");
$Srv.Start();
Start-Process "http://localhost:8080/index.html";
While($Srv.IsListening) {
    $Ctx = $Srv.GetContext();
    $Buf = [System.IO.File]::OpenRead((Join-Path $Pwd($Ctx.Request.RawUrl)));
    $Ctx.Response.ContentLength64 = $Buf.Length;
    $Ctx.Response.Headers.Add("Content-Type", "text/html");
    $Buf.CopyTo($Ctx.Response.OutputStream);
    $Buf.Close();
    $Ctx.Response.Close();
};

这个方法非常简单,它不能显示目录或其他花哨的东西。但是它很好地处理了这些CORS错误。

将脚本保存为服务器。在项目的根目录下运行。它将在它所在的目录中启动index.html。

在Android应用程序中-例如,允许JavaScript通过file:///android_asset/访问资产-使用setAllowFileAccessFromFileURLs(true)在WebView上调用getSettings()获得的WebSettings上。