“仅HTTP支持跨源请求。” 加载本地文件时出错

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

我遇到了"Cross origin requests are only supported for HTTP."错误，但是我不知道是什么原因引起的，也不知道如何解决。

我的水晶球说您正在使用file://或加载模型C:/，这对于错误消息是正确的，因为它们不是http://

因此，您既可以在本地PC上安装Web服务器，也可以将模型上传到其他地方，然后使用jsonp并将URL更改为http://example.com/path/to/model

RFC-6454中将原点定义为

   ...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 ...

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

在Chrome中，您可以使用以下标志：

--allow-file-access-from-files

在这里阅读更多。

今天就参加这个。

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

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://第二段代码中缺少。

只是想把它放在那里，以防其他人遇到类似的问题。

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

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

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

错误：localhost:8080

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

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

python -m http.server

我将列出三种解决此问题的方法：

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。注意：请不要使用此快捷方式定期浏览。

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

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

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

如果您使用Mozilla Firefox，它将按预期运行，没有任何问题。

PS令人惊讶的是，IntenetExplorer_Edge绝对可以正常工作！！！

使用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]

希望它可以帮助某人:)

在使用本地目录中的json文件的浏览器中加载HTML文件时，出现了确切的错误。就我而言，我能够通过创建一个简单的节点服务器来解决此问题，该服务器可以处理静态内容。我在另一个答案中为此保留了代码。

我建议您使用小型服务器在本地主机上运行此类应用程序（如果您未使用某些内置服务器）。

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

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

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

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

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

它只是说该应用程序应该在Web服务器上运行。我在chrome上遇到了同样的问题，我启动了tomcat并将我的应用程序移到那里，并且它可以正常工作。

嗯 我刚刚发现了一些官方用语：“由于跨域安全限制，尝试加载使用dojo / text插件的未构建的远程AMD模块将失败。（AMD模块的内置版本不受影响，因为通过消除对dojo / text的调用，构建系统。）” https://dojotoolkit.org/documentation/tutorials/1.10/cdn/

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

所有人MacOS...设置一个简单的LaunchAgent以在您自己的Chrome副本中启用这些迷人的功能...

保存plist，命名什么（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>

它应该在启动时启动..但是您可以随时使用terminal命令强制它启动。

launchctl load -w ~/Library/LaunchAgents/launch.chrome.dev.mode.plist

TADA！😎💁🏻🙊🙏🏾

• 为Java安装本地Web服务器，例如Tomcat，对于php，您可以使用lamp等
• 将json文件拖放到公共可访问的应用服务器目录中

• 

• 启动应用服务器，您应该能够从本地主机访问文件

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

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

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

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

希望对遇到这个问题的人有所帮助。

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

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

在我的情况下，一个标签被用于获取“指针光标”，并且该事件实际上是由一些jQuery on click事件控制的。我删除了href并添加了一个适用的类：

cursor:pointer;

对于Linux Python用户：

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

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

尝试.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'))

3. 运行gulp bundle-for-local或更新您的构建脚本以自动运行它。

您可以在此处查看针对我的案例的详细问题和解决方案。

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

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

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

首先关闭所有chrome实例。

之后，遵循此步骤。

我在mac上使用了此命令。

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

对于Windows：

如何在“ --allow-file-access-from-files”模式下使用Chrome启动HTML？

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

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