我试图加载一个3D模型,存储在我的电脑本地,到Three.js与JSONLoader, 3D模型是在同一目录下,作为整个网站。
我得到了“跨起源请求只支持HTTP.”错误,但我不知道是什么原因导致它也不知道如何修复它。
我试图加载一个3D模型,存储在我的电脑本地,到Three.js与JSONLoader, 3D模型是在同一目录下,作为整个网站。
我得到了“跨起源请求只支持HTTP.”错误,但我不知道是什么原因导致它也不知道如何修复它。
当前回答
我将列出3种不同的方法来解决这个问题:
Using a very lightweight npm package: Install live-server using npm install -g live-server. Then, go to that directory open the terminal and type live-server and hit enter, page will be served at localhost:8080. BONUS: It also supports hot reloading by default. Using a lightweight Google Chrome app developed by Google: Install the app, then go to the apps tab in Chrome and open the app. In the app point it to the right folder. Your page will be served! Modifying Chrome shortcut in windows: Create a Chrome browser's shortcut. Right-click on the icon and open properties. In properties, edit target to "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="C:/ChromeDevSession" and save. Then using Chrome open the page using ctrl+o. NOTE: Do NOT use this shortcut for regular browsing.
注意:使用类似http://localhost:8080的http://以防出错。
其他回答
只是显式-是的,错误是说你不能将浏览器直接指向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
它只是说应用程序应该在web服务器上运行。我在chrome上也有同样的问题,我启动tomcat并将我的应用程序移动到那里,它工作了。
如果您坚持在本地运行.html文件,而不是将其与web服务器一起提供,那么您可以通过使有问题的资源内联可用来防止这些跨起源请求的发生。
当我试图通过file://来提供.js文件时,我遇到了这个问题。我的解决方案是更新我的构建脚本,以取代<script src="…">标签与<script>…</script>. " 这里有一个吞咽的方法:
1. 运行NPM install——save-dev来安装gulp、gulp-inline和del包。
2. 在根目录中创建gulpfile.js后,添加以下代码(只需更改文件路径以适合自己):
let gulp = require('gulp');
let inline = require('gulp-inline');
let del = require('del');
gulp.task('inline', function (done) {
gulp.src('dist/index.html')
.pipe(inline({
base: 'dist/',
disabledTypes: 'css, svg, img'
}))
.pipe(gulp.dest('dist/').on('finish', function(){
done()
}));
});
gulp.task('clean', function (done) {
del(['dist/*.js'])
done()
});
gulp.task('bundle-for-local', gulp.series('inline', 'clean'))
要么运行gulp bundle-for-local,要么更新构建脚本以自动运行它。
您可以在这里看到我的案例的详细问题和解决方案。
对于那些在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。
er。我刚刚发现了一些官方文字“试图加载未构建的,远程AMD模块使用dojo/文本插件将失败,由于跨起源安全限制。(AMD模块的构建版本不受影响,因为构建系统消除了对dojo/text的调用。)”https://dojotoolkit.org/documentation/tutorials/1.10/cdn/