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

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


当前回答

如果您坚持在本地运行.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,要么更新构建脚本以自动运行它。

您可以在这里看到我的案例的详细问题和解决方案。

其他回答

加载本地文件的一种方法是在项目文件夹中使用它们,而不是在项目文件夹之外。在您的项目示例文件下创建一个文件夹,类似于我们创建图像的方式,并替换其中使用完整的本地路径而不是项目路径的部分,并使用项目文件夹下的文件的相对url。 这对我很有效

只需将url更改为http://localhost而不是localhost。如果你从本地打开html文件,你应该创建一个本地服务器来服务该html文件,最简单的方法是使用Web server for Chrome。这样问题就解决了。

我怀疑在一些答案中已经提到了它,但我将稍微修改一下,以获得完整的工作答案(更容易找到和使用)。

访问:https://nodejs.org/en/download/。安装nodejs。 通过命令提示符npm Install -g http-server安装http-server。 切换到你的工作目录,index.html/yoursome.html所在的目录。 运行http-server -c-1命令启动http服务器

打开网络浏览器http://localhost:8080 或http://localhost:8080/yoursome.html -取决于您的HTML文件名。

它只是说应用程序应该在web服务器上运行。我在chrome上也有同样的问题,我启动tomcat并将我的应用程序移动到那里,它工作了。

如果您正在搜索Firebase托管的解决方案,则可以运行

firebase serve——firebase命令行的唯一托管命令

这就是我来这里的目的,所以我想我就把它留在这里帮忙吧。