Question

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

我收到"Cross origin requests are only supported for HTTP."错误，但我不知道是什么原因造成的，也不知道如何修复它。

Answer 1

我的水晶球表示您正在使用file://或C:/加载模型，因为它们不是http://

因此，您可以在本地PC上安装网络服务器，也可以将模型上传到其他位置并使用jsonp并将网址更改为http://example.com/path/to/model

Origin在RFC-6454中定义为

   ...they have the same
   scheme, host, and port.  (See Section 4 for full details.)

因此，即使您的文件来自同一主机（localhost），但只要方案不同（http / file），它们就会被视为不同的来源。

Answer 2

只是为了明确 - 是的，错误是说您无法直接将浏览器指向file://some/path/some.html

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

Python 2

如果你安装了Python ......

使用命令some.html

cd /path/to/your/folder

使用命令python -m SimpleHTTPServer

这将启动一个Web服务器来托管您在http://localhost:8000

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

这种方法内置于任何Python安装中。

Python 3

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

Node.js的

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

输入http-server

npm install -g http-server

转到您some.html生活
通过发出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

Read more here.

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

只需将网址更改为localhost而不是{{1}}。如果从本地打开html文件，则应创建一个本地服务器来提供该html文件，最简单的方法是使用Web Server for Chrome。这将解决问题。

Answer 6

在Android应用中 - 例如，要允许JavaScript通过file:///android_asset/访问资源 - 请使用setAllowFileAccessFromFileURLs(true)上的WebSettings来调用getSettings() WebView。

Answer 7

我将列出 3种不同方法来解决此问题：

使用非常轻量级的npm软件包：使用npm install -g live-server安装live-server。然后，转到该目录，打开终端并输入live-server并按Enter键，页面将在localhost:8080提供。奖金：默认情况下它还支持热重新加载。
使用Google开发的轻量级Google Chrome app ：然后安装应用，转到Chrome中的应用标签页并打开应用。在应用程序中将其指向正确的文件夹。您的页面将会送达！
修改Windows中的Chrome快捷方式：创建Chrome浏览器的快捷方式。右键单击图标并打开属性。在媒体资源中，将target修改为"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="C:/ChromeDevSession"并保存。然后使用Chrome使用ctrl+o打开页面。注意： NOT 使用此快捷方式进行常规浏览。

Answer 8

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

P.S。令人惊讶的是，IntenetExplorer_Edge工作得非常好!!!

Answer 9

对于没有Python或Node.js的Windows用户，仍有轻量级解决方案： Mongoose 。

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

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

Answer 10

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

错误：localhost:8080

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

Answer 11

为谁使用VS Code的简便解决方案

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

它使您可以轻松打开实时服务器。并且由于它创建了localhost服务器，因此问题得以解决。您只需打开HTML文件即可启动localhost，然后在编辑器上单击鼠标右键，然后单击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 12

对我来说最快的方法是： Windows用户在Firefox上运行文件已解决，或如果要对我使用chrome，最简单的方法是安装Python 3，然后从命令提示符运行命令

<html>
<head></head>
<body>

Thank you, <?php echo $_POST["prefix"] ?> <?php echo $_POST["name"]; ?> for your comment.<br><br>
You stated that you found this example to be '<?php echo $_POST["response"]; ?>'<br>
and added: <br>
'<?php echo $_POST['comment'];?>'<br>


</body>
</html>

，然后转到http://localhost:8000/，然后导航到您的文件

python -m http.server

Answer 13

我建议您使用迷你服务器在localhost上运行这些类型的应用程序（如果您没有使用某些内置服务器）。

这是一个非常简单的设置和运行：

https://www.npmjs.com/package/tiny-server

Answer 14

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

Answer 15

我怀疑在某些答案中已经提到了它，但我将对其稍作修改以得到完整的工作答案（更易于查找和使用）。

转到：https://nodejs.org/en/download/。安装nodejs。
通过从命令提示符npm install -g http-server运行命令来安装http-server。
切换到index.html / yoursome.html所在的工作目录。
通过运行命令http-server -c-1

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

Answer 16

它只是说应用程序应该在Web服务器上运行。我遇到了与chrome相同的问题，我启动了tomcat并将我的应用程序移到那里，并且它有效。

Answer 17

在没有服务器的情况下无法加载静态本地文件（例如：svg）。如果您的计算机上安装了NPM / YARN，则可以使用“ http-server”

设置简单的http服务器。

npm install http-server -g
http-server [path] [options]

或在该项目文件夹中打开终端，然后键入“ hs”。它将自动启动HTTP活动服务器。

Answer 18

如果您坚持要在本地运行.html文件，而不是将其与网络服务器一起使用，则可以通过使有问题的资源内联化来防止那些跨源请求首先发生。

在尝试通过.js提供file://文件时遇到了这个问题。我的解决方案是更新构建脚本，以将<script src="...">标记替换为<script>...</script>。这是一种gulp方法：

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或更新构建脚本以自动运行它。

您可以查看我的案例here的详细问题和解决方案。

Answer 19

对于Linux Python用户：

import webbrowser
browser = webbrowser.get('google-chrome --allow-file-access-from-files %s')
browser.open(url)

Answer 20

对于MacOS上的所有人...设置一个简单的 LaunchAgent ，在您自己的 Chrome 副本中启用这些迷人的功能... < / p>

在plist中保存{{1>}名为的任何（例如launch.chrome.dev.mode.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>

TADA！

Answer 21

当使用带有以下href的锚标记时，我也能够重新创建此错误消息：

＆＃13;

<a href="javascript:">Example a tag</a>

＆＃13;

在我的情况下，正在使用一个标签来获取指针光标＆＃39;事件实际上是由一些jQuery点击事件控制的。我删除了href并添加了一个适用的类：

＆＃13;

cursor:pointer;

＆＃13;

Answer 22

为java安装本地网络服务器，例如Tomcat，对于php，你可以使用灯等
将json文件放在公共可访问的应用服务器目录中
启动应用服务器，您应该可以从localhost访问该文件

Answer 23

ER。我刚刚发现了一些官方文字＆＃34;尝试加载使用dojo / text插件的未构建的远程AMD模块将因跨域安全限制而失败。（AMD模块的内置版本不受影响，因为构建系统会消除对dojo / text的调用。）＆＃34; https://dojotoolkit.org/documentation/tutorials/1.10/cdn/

Answer 24

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

Answer 25

cordova实现了这一目标。我仍然不知道科尔多瓦的表现。它甚至没有通过shouldInterceptRequest。

后来我发现从本地加载任何文件的关键是：myWebView.getSettings（）。setAllowUniversalAccessFromFileURLs（true）;

当您要访问任何http资源时，Webview将使用OPTIONS方法进行检查，您可以通过返回响应来通过WebViewClient.shouldInterceptRequest授予访问权限，对于以下GET / POST方法，您可以仅返回空。

Answer 26

首先关闭所有chrome实例。

在此之后。

我在Mac上使用了此命令。

“ / Applications / Google Chrome.app/Contents/MacOS/Google Chrome” --allow-file-access-from-files

对于Windows：

How to launch html using Chrome at "--allow-file-access-from-files" mode?

Answer 27

当我下载页面以供离线查看时遇到了这种情况。

我只需要从所有integrity="*****"和crossorigin="anonymous"标签中删除<link>和<script>属性

Answer 28

很多问题，我的问题是缺少'/'示例： jquery-1.10.2.js：8720 XMLHttpRequest无法加载http://localhost:xxxProduct/getList_tagLabels/ 必须是：http://localhost:xxx/Product/getList_tagLabels/

我希望这有助于解决这个问题。

＆＃34;只有HTTP支持交叉原始请求。＆＃34;加载本地文件时出错

28 个答案:

Python 2

Python 3

Node.js的

红宝石

PHP