Javascript &引用;仅HTTP支持跨源请求。”;加载本地文件时出错
我正在尝试使用Javascript &引用;仅HTTP支持跨源请求。”;加载本地文件时出错,javascript,file,http,three.js,cors,Javascript,File,Http,Three.js,Cors,我正在尝试使用JSONLoader将一个3D模型加载到Three.js中,该3D模型与整个网站位于同一目录中 我得到了“跨源请求仅支持HTTP。”错误,但我不知道是什么原因导致它,也不知道如何修复它。我的水晶球说您正在使用文件://或C://加载模型,这与错误消息保持一致,因为它们不是HTTP:// 因此,您可以在本地PC中安装Web服务器,也可以将模型上载到其他地方,然后使用jsonp并将url更改为http://example.com/path/to/model 原产地定义如下: 因此,即使
JSONLoader
将一个3D模型加载到Three.js中,该3D模型与整个网站位于同一目录中
我得到了
“跨源请求仅支持HTTP。”
错误,但我不知道是什么原因导致它,也不知道如何修复它。我的水晶球说您正在使用文件://
或C://
加载模型,这与错误消息保持一致,因为它们不是HTTP://
因此,您可以在本地PC中安装Web服务器,也可以将模型上载到其他地方,然后使用jsonp
并将url更改为http://example.com/path/to/model
原产地定义如下:
因此,即使您的文件源于同一主机(
localhost
),但只要方案不同(http
/file
),它们就被视为不同的源文件。简单地说,是的,错误是您不能将浏览器直接指向file://some/path/some.html
这里有一些选项可以快速启动本地web服务器,让您的浏览器呈现本地文件
Python 2
如果您安装了Python
cd/path/to/your/folder
Python-msimplehttpserver
http://localhost:8000
python-msimplehttpserver 9000
提供链接:http://localhost:9000
python3-mhttp.server
Node.js
或者,如果您需要更具响应性的设置,并且已经在使用nodejs
npm安装-g http服务器安装http服务器
some.html
所在的位置http服务器-c-1
http://localhost:8080
红宝石
如果您的首选语言是Ruby。。。红宝石之神说这同样有效:
ruby -run -e httpd . -p 8080
PHP
当然,PHP也有它的解决方案
php -S localhost:8000
今天遇到了这个
我写了一些类似这样的代码:
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;
});
});
…但应该是这样的:
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://
我只是想说出来,以防有其他人有类似的问题。在Chrome中,您可以使用以下标志:
--allow-file-access-from-files
我在浏览器上加载HTML文件时遇到了这个错误,该浏览器使用本地目录中的json文件。在我的例子中,我能够通过创建一个简单的节点服务器来解决这个问题,该服务器允许服务器静态内容。我把代码留在这里。对于那些在Windows上没有Python或Node.js的用户,仍然有一个轻量级的解决方案: 您所要做的就是将可执行文件拖到服务器根所在的位置,然后运行它。任务栏中将出现一个图标,它将在默认浏览器中导航到服务器
另外,它是一个100%可移植的WAMP,运行在一个文件夹中,非常棒。如果您需要快速的PHP和MySQL服务器,这是一个选项。er。我刚刚发现了一些官方词语“由于跨源安全限制,尝试加载使用dojo/text插件的未构建远程AMD模块将失败。(AMD模块的构建版本不受影响,因为构建系统消除了对dojo/text的调用。)”加载本地文件的一种方法是在项目文件夹中使用它们,而不是在项目文件夹外使用它们。在您的项目示例文件下创建一个文件夹,类似于我们为图像创建的方式,并替换使用项目路径以外的完整本地路径的部分,并使用项目文件夹下文件的相对url。
这对我来说很有用,对MacOS上的所有人来说都很有用。。。设置一个简单的LaunchAgent,在您自己的Chrome副本中启用这些迷人的功能 将名为which(
launch.chrome.dev.mode.plist
)的plist
保存在~/Library/LaunchAgents
中,内容与
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>Label</key>
<string>launch.chrome.dev.mode</string>
<key>ProgramArguments</key>
<array>
<string>/Applications/Google Chrome.app/Contents/MacOS/Google Chrome</string>
<string>-allow-file-access-from-files</string>
</array>
<key>RunAtLoad</key>
<true/>
</dict>
</plist>
标签
launch.chrome.dev.mode
程序参数
/Applications/Google Chrome.app/Contents/MacOS/Google Chrome
-允许从文件访问文件
运行负荷
它应该在启动时启动。。但您可以随时使用terminal命令强制它这样做
launchctl load-w~/Library/LaunchAgents/launch.chrome.dev.mode.plist
多田这方面有很多问题,我的问题是缺少“/”示例: jquery-1.10.2.js:8720 XMLHttpRequest无法加载 它必须是:
我希望这对遇到这个问题的人有所帮助。它只是说应用程序应该在web服务器上运行。我在chrome上也遇到了同样的问题,我启动了tomcat并将我的应用程序移到了那里,它成功了。只需将url更改为
http://localhost
而不是localhost
。如果从本地打开html文件,则应创建一个本地服务器来服务该html文件,最简单的方法是使用。这将解决问题。在Android应用程序中-例如,允许JavaScript通过file:///android_asset/
-在WebSettings
上使用setAllowFileAccessFromFileURLs(true)
,这是通过调用WebView
上的getSettings()
获得的
npm install http-server -g
http-server [path] [options]
python -m http.server
import webbrowser
browser = webbrowser.get('google-chrome --allow-file-access-from-files %s')
browser.open(url)
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'))