我试图加载一个3D模型,存储在我的电脑本地,到Three.js与JSONLoader, 3D模型是在同一目录下,作为整个网站。
我得到了“跨起源请求只支持HTTP.”错误,但我不知道是什么原因导致它也不知道如何修复它。
我试图加载一个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,要么更新构建脚本以自动运行它。
您可以在这里看到我的案例的详细问题和解决方案。
其他回答
我将列出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://以防出错。
在Chrome中,你可以使用这个标志:
--allow-file-access-from-files
点击这里阅读更多。
只需将url更改为http://localhost而不是localhost。如果你从本地打开html文件,你应该创建一个本地服务器来服务该html文件,最简单的方法是使用Web server for Chrome。这样问题就解决了。
今天碰到了这个。
我写了一些像这样的代码:
app.controller('ctrlr', function($scope, $http){
$http.get('localhost:3000').success(function(data) {
$scope.stuff = data;
});
});
...但它应该是这样的:
app.controller('ctrlr', function($scope, $http){
$http.get('http://localhost:3000').success(function(data) {
$scope.stuff = data;
});
});
唯一的区别是第二段代码中没有http://。
只是想把它放出来,以防其他人有类似的问题。
不可能在没有服务器的情况下加载静态本地文件(例如:svg)。如果你的机器上安装了NPM /YARN,你可以使用"http-server"来设置简单的http服务器。
npm install http-server -g
http-server [path] [options]
或者在项目文件夹中打开终端并键入“hs”。它将自动启动HTTP live服务器。