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

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


当前回答

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

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

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

其他回答

只是显式-是的,错误是说你不能将浏览器直接指向file://some/path/some.html

这里有一些选项可以快速启动本地web服务器,让浏览器呈现本地文件

Python 2

如果你安装了Python…

使用cd /path/to/your/folder命令将目录更改为文件some.html所在的文件夹 使用Python -m SimpleHTTPServer命令启动一个Python web服务器

这将启动一个web服务器,在http://localhost:8000上托管您的整个目录列表

你可以使用自定义端口python -m SimpleHTTPServer 9000给你链接:http://localhost:9000

这种方法内置于任何Python安装中。

Python 3

执行相同的步骤,但使用以下命令代替python3 -m http.server

VSCode

如果你正在使用Visual Studio Code,你可以安装Live Server扩展,它提供了一个本地web服务器环境。

node . js

或者,如果你需要一个更灵敏的设置,并且已经使用了nodejs…

通过输入npm Install -g http-server安装http-server 切换到你的工作目录,yoursome.html所在的目录 通过发出http-server -c-1启动http服务器

这将启动一个Node.js httpd,它将目录中的文件作为可从http://localhost:8080访问的静态文件提供

Ruby

如果你的首选语言是Ruby…红宝石之神说这也管用:

ruby -run -e httpd . -p 8080

PHP

当然,PHP也有它的解决方案。

php -S localhost:8000

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

科尔多瓦实现了这一点。我还是不明白科多瓦是怎么做到的。它甚至不通过shouldInterceptRequest。

后来我发现,从本地加载任何文件的关键是:myWebView.getSettings().setAllowUniversalAccessFromFileURLs(true);

当你想要访问任何http资源时,webview会用OPTIONS方法检查,你可以通过WebViewClient授予访问权限。shouldInterceptRequest通过返回一个响应,对于下面的GET/POST方法,您可以只返回null。

如果你使用旧版本的Mozilla Firefox(2019年之前),它会像预期的那样工作,没有任何问题;

附言:令人惊讶的是,旧版本的ie和Edge也能正常工作。

对于那些在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。