我试图加载一个3D模型,存储在我的电脑本地,到Three.js与JSONLoader, 3D模型是在同一目录下,作为整个网站。
我得到了“跨起源请求只支持HTTP.”错误,但我不知道是什么原因导致它也不知道如何修复它。
我试图加载一个3D模型,存储在我的电脑本地,到Three.js与JSONLoader, 3D模型是在同一目录下,作为整个网站。
我得到了“跨起源请求只支持HTTP.”错误,但我不知道是什么原因导致它也不知道如何修复它。
我的水晶球显示,您正在使用文件://或C:/加载模型,这对错误消息保持真实,因为它们不是http://
因此,您可以在本地PC上安装web服务器,也可以将模型上传到其他地方,使用jsonp并将url更改为http://example.com/path/to/model
RFC-6454中将Origin定义为
...they have the same
scheme, host, and port. (See Section 4 for full details.)
因此,即使您的文件起源于同一主机(localhost),但只要方案不同(http / file),它们就被视为不同的起源。
只是显式-是的,错误是说你不能将浏览器直接指向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
今天碰到了这个。
我写了一些像这样的代码:
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://。
只是想把它放出来,以防其他人有类似的问题。
当我在浏览器上加载一个HTML文件时,我得到了这个确切的错误,该浏览器正在使用一个json文件从本地目录。在我的例子中,我能够通过创建一个允许服务器静态内容的简单节点服务器来解决这个问题。我把这个的代码留在了另一个答案。
对于那些在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/
加载本地文件的一种方法是在项目文件夹中使用它们,而不是在项目文件夹之外。在您的项目示例文件下创建一个文件夹,类似于我们创建图像的方式,并替换其中使用完整的本地路径而不是项目路径的部分,并使用项目文件夹下的文件的相对url。 这对我很有效
很多问题,我的问题是缺少'/'的例子: jquery-1.10.2.js:8720 XMLHttpRequest无法加载http://localhost:xxxProduct/getList_tagLabels/ 必须是:http://localhost:xxx/Product/getList_tagLabels/
我希望这对遇到这个问题的人有所帮助。
只需将url更改为http://localhost而不是localhost。如果你从本地打开html文件,你应该创建一个本地服务器来服务该html文件,最简单的方法是使用Web server for Chrome。这样问题就解决了。
在Android应用程序中-例如,允许JavaScript通过file:///android_asset/访问资产-使用setAllowFileAccessFromFileURLs(true)在WebView上调用getSettings()获得的WebSettings上。
我建议您使用一个迷你服务器在本地主机上运行这类应用程序(如果您没有使用某些内置服务器)。
这里有一个非常简单的设置和运行:
https://www.npmjs.com/package/tiny-server
我将列出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://以防出错。
如果你使用旧版本的Mozilla Firefox(2019年之前),它会像预期的那样工作,没有任何问题;
附言:令人惊讶的是,旧版本的ie和Edge也能正常工作。
为java安装本地web服务器,例如Tomcat,对于php,您可以使用lamp等 将json文件放到公共可访问的应用服务器目录中 启动应用程序服务器,您应该能够从localhost访问该文件
我也能够在使用以下href的锚标记时重新创建此错误消息:
<a href="javascript:">示例:一个标签</a> .
在我的情况下,一个标签被用来获得“指针光标”和事件实际上是由一些jQuery点击事件控制。我删除了href并添加了一个应用的类:
光标:指针;
不可能在没有服务器的情况下加载静态本地文件(例如:svg)。如果你的机器上安装了NPM /YARN,你可以使用"http-server"来设置简单的http服务器。
npm install http-server -g
http-server [path] [options]
或者在项目文件夹中打开终端并键入“hs”。它将自动启动HTTP live服务器。
我怀疑在一些答案中已经提到了它,但我将稍微修改一下,以获得完整的工作答案(更容易找到和使用)。
访问: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文件名。
对我来说,最快的方法是: 对于windows用户在Firefox上运行文件的问题解决了,或者 如果你想使用chrome,对我来说最简单的方法是安装Python 3,然后从命令提示符运行命令Python -m http。服务器,然后访问http://localhost:8000/,然后导航到您的文件
python -m http.server
简单的解决方案,谁使用VS Code
我得到这个错误已经有一段时间了。大多数答案都是可行的。但我找到了一个不同的解决方案。如果你不想处理node.js或任何其他解决方案在这里,你正在使用一个HTML文件(从另一个js文件调用函数或获取json api的)尝试使用Live Server扩展。
它允许您轻松地打开一个活动服务器。因为它创建了本地主机服务器,所以问题得到了解决。您可以通过打开HTML文件并右键单击编辑器并单击open with Live Server来启动localhost。
它基本上使用http://localhost/index.html加载文件,而不是使用file://....
EDIT
不需要有.html文件。您可以使用快捷方式启动活动服务器。
按(alt+L, alt+O)打开服务器,按(alt+L, alt+C)停止服务器。[在MAC上,cmd+L, cmd+O和cmd+L, cmd+C]
希望它能帮助到别人:)
科尔多瓦实现了这一点。我还是不明白科多瓦是怎么做到的。它甚至不通过shouldInterceptRequest。
后来我发现,从本地加载任何文件的关键是:myWebView.getSettings().setAllowUniversalAccessFromFileURLs(true);
当你想要访问任何http资源时,webview会用OPTIONS方法检查,你可以通过WebViewClient授予访问权限。shouldInterceptRequest通过返回一个响应,对于下面的GET/POST方法,您可以只返回null。
当我下载一个页面进行离线查看时,我就遇到了这种情况。
我只需要从所有<link>和<script>标签中删除integrity="*****"和crossorigin="anonymous"属性
对于Linux Python用户:
import webbrowser
browser = webbrowser.get('google-chrome --allow-file-access-from-files %s')
browser.open(url)
如果您坚持在本地运行.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,要么更新构建脚本以自动运行它。
您可以在这里看到我的案例的详细问题和解决方案。
如果您正在搜索Firebase托管的解决方案,则可以运行
firebase serve——firebase命令行的唯一托管命令
这就是我来这里的目的,所以我想我就把它留在这里帮忙吧。
Url应该像这样:
createUserURL = "http://www.localhost:3000/api/angular/users"
而不是:
createUserURL = "localhost:3000/api/angular/users"