"只有HTTP支持跨源请求." 加载本地文件时出错

Question

我正在尝试将3D模型加载到Three.js中JSONLoader,并且该3D模型与整个网站位于同一目录中.

我收到了"Cross origin requests are only supported for HTTP."错误,但我不知道是什么导致它,也不知道如何解决它.

Answer 1

我的水晶球说,你使用的是加载模型file://或者C:/,这秉承了该错误消息,因为它们不http://

因此,您可以在本地PC中安装Web服务器,也可以将模型上传到其他位置,然后使用jsonp并更改URLhttp://example.com/path/to/model

Answer 2

只是为了明确 - 是的,错误是说你不能直接指向你的浏览器 file://some/path/some.html

以下是快速启动本地Web服务器以使浏览器呈现本地文件的一些选项

Python 2

如果你安装了Python ...

1. some.html使用该命令将目录更改为存在文件或文件的文件夹cd /path/to/your/folder

2. 使用该命令启动Python Web服务器 python -m SimpleHTTPServer

这将启动一个Web服务器来托管您的整个目录列表 http://localhost:8000

3. 您可以使用自定义端口 python -m SimpleHTTPServer 9000为您提供链接:http://localhost:9000

此方法内置于任何Python安装中.

Python 3

执行相同的步骤,但请改用以下命令 python3 -m http.server

Node.js的

或者,如果您需要更具响应性的设置并且已经使用了nodejs ......

1. http-server通过键入安装npm install -g http-server

2. 改变你的工作目录,你的some.html生活

3. 通过发出启动您的http服务器 http-server -c-1

这会旋转一个Node.js httpd,它将目录中的文件作为可从中访问的静态文件 http://localhost:8080

红宝石

如果您的首选语言是Ruby ... Ruby Gods说这也有效:

ruby -run -e httpd . -p 8080

PHP

当然PHP也有它的解决方案.

php -S localhost:8000

Answer 3

在Chrome中,您可以使用此标记:

--allow-file-access-from-files

在这里阅读更多.

Answer 4

今天来到这里.

我写了一些看起来像这样的代码:

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://第二段代码缺乏.

只是想把它放在那里,以防有其他人有类似的问题.

Answer 5

只要将URL更改为http://localhost代替localhost.如果从本地打开html文件,则应创建一个本地服务器来提供该html文件,这是最简单的方法Web Server for Chrome.这将解决问题.

Answer 6

在一个Android应用程序-例如,允许JavaScript必须通过获得资产file:///android_asset/-使用setAllowFileAccessFromFileURLs(true)的WebSettings,你从调用获得getSettings()的WebView.

Answer 7

使用http://或https://创建网址

错误：localhost:8080

解决方案：http://localhost:8080

Answer 8

对于没有Python或Node.js的Windows用户,仍然有一个轻量级的解决方案:Mongoose.

您所做的只是将可执行文件拖到服务器根目录所在的位置,然后运行它.任务栏中将出现一个图标,它将在默认浏览器中导航到服务器.

此外,Z-WAMP是100%便携式WAMP,可在一个文件夹中运行,非常棒.如果你需要一个快速的PHP和MySQL服务器,这是一个选项.

Answer 9

我将列出3种不同的方法来解决这个问题:

1. 使用非常轻便npm包:安装实时服务器使用npm install -g live-server.然后,转到该目录打开终端并键入live-server并按Enter键,页面将被提供localhost:8080.奖金:默认情况下它还支持热重新加载.
2. 使用由Google开发的轻量级Google Chrome 应用:然后安装应用,转到Chrome中的应用标签,然后打开应用.在应用程序中将其指向正确的文件夹.您的页面将被提供!
3. 在Windows中修改Chrome快捷方式:创建Chrome浏览器的快捷方式.右键单击图标并打开属性.在性能,编辑target到"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="C:/ChromeDevSession"和保存.然后使用Chrome打开页面ctrl+o.注意:请不要使用此快捷键来浏览定期.

Answer 10

如果您使用Mozilla Firefox,它将按预期工作,没有任何问题;

PS甚至IE_Edge工作正常,令人惊讶!!

Answer 11

对我而言，最快的方法是：对于Windows用户，在Firefox上运行文件已解决问题；或者，如果您要使用chrome，对我而言，最简单的方法是安装Python 3，然后从命令提示符处运行命令，python -m http.server 然后转到http：// localhost：8000 / 然后导航到您的文件

python -m http.server

Answer 12

使用 VS Code 的简单解决方案

我已经收到这个错误一段时间了。大多数答案都有效。但我找到了一个不同的解决方案。如果您不想处理node.js这里的任何其他解决方案，并且您正在使用 HTML 文件（从另一个 js 文件调用函数或获取 json api），请尝试使用Live Server扩展。

它允许您轻松打开实时服务器。由于它创建了localhost服务器，问题正在解决。您可以简单地localhost通过打开 HTML 文件并右键单击编辑器并单击 来启动Open with Live Server。

它基本上使用http://localhost/index.html而不是使用加载文件file://...。

编辑

没有必要有一个.html文件。您可以使用快捷方式启动 Live Server。

点击(alt+L, alt+O)打开服务器并(alt+L, alt+C)停止服务器。[在 MAC 上，cmd+L, cmd+O和cmd+L, cmd+C]

希望它会帮助某人:)

Answer 13

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

1. 转到：https : //nodejs.org/en/download/。安装 nodejs。

2. 通过从命令提示符运行命令来安装 http-server npm install -g http-server。

3. 切换到index.html/yoursome.html所在的工作目录。

4. 通过运行命令启动你的 http 服务器 http-server -c-1

根据您的 html 文件名，打开 Web 浏览器http://localhost:8080 或http://localhost:8080/yoursome.html-。

Answer 14

当我在使用本地目录中的 json 文件的浏览器上加载 HTML 文件时，我收到了这个确切的错误。就我而言，我能够通过创建一个允许服务器静态内容的简单节点服务器来解决这个问题。我在另一个答案中留下了此代码。