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

Question

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

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

score 872 · Accepted Answer

我的水晶球说您正在使用file://or加载模型C:/，这与错误消息保持一致，因为它们不是http://

因此，您可以在本地 PC 上安装网络服务器，也可以将模型上传到其他地方，然后使用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)，它们就会被视为不同的来源。

score 691 · Accepted Answer

明确一点 - 是的，错误是说您不能将浏览器直接指向file://some/path/some.html

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

蟒蛇2

如果你安装了 Python...

some.html使用命令将目录更改为您的文件所在的文件夹cd /path/to/your/folder
使用命令启动 Python Web 服务器python -m SimpleHTTPServer

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

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

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

蟒蛇 3

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

节点.js

或者，如果您需要更灵敏的设置并且已经使用 nodejs...

http-server通过键入安装npm install -g http-server
进入你的工作目录，你some.html生活的地方
通过发出启动您的 http 服务器http-server -c-1

这会启动一个 Node.js httpd，它将目录中的文件作为静态文件提供，可从http://localhost:8080

红宝石

如果您的首选语言是 Ruby……Ruby 之神说这也可以：

ruby -run -e httpd . -p 8080

PHP

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

php -S localhost:8000

score 176 · Accepted Answer

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

--allow-file-access-from-files

在这里阅读更多。

score 72 · Accepted Answer

今天跑到这个了。

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

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://唯一的区别是第二个代码片段中缺少。

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

score 48 · Accepted Answer

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

score 30 · Accepted Answer

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

使用非常轻量级npm的包：使用npm install -g live-server. 然后，转到该目录，打开终端并键入live-server并按 Enter，页面将在localhost:8080. 奖励：默认情况下它还支持热重载。
使用由 Google 开发的轻量级 Google Chrome应用程序：安装应用程序，然后转到 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。注意：请勿使用此快捷方式进行常规浏览。

注意：如果遇到错误，请使用http://like 。http://localhost:8080

score 21 · Accepted Answer

在 Android 应用程序中——例如，允许 JavaScript 访问资产——file:///android_asset/使用你从setAllowFileAccessFromFileURLs(true)调用.WebSettingsgetSettings()WebView

score 21 · Accepted Answer

21

使用http://orhttps://创建 url

错误：localhost:8080

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

于 2018-10-12T03:11:54.010 回答

score 16 · Accepted Answer

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

python -m http.server

score 13 · Accepted Answer

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

PS 令人惊讶的是，IntenetExplorer_Edge 工作得非常好！！！

score 12 · Accepted Answer

对于那些在 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 错误。

将脚本另存为server.ps1并在项目的根目录中运行。它将在它所在的目录中启动 index.html。

score 10 · Accepted Answer

使用 VS Code 的简单解决方案

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

希望它会帮助某人:)

score 7 · Accepted Answer

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

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

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

score 4 · Accepted Answer

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

score 3 · Accepted Answer

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

score 3 · Accepted Answer

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

这是一个非常易于设置和运行的程序：

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

score 2 · Accepted Answer

对于你们所有人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>

它应该在启动时启动..但您可以随时使用终端命令强制它这样做

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

多田！

score 2 · Accepted Answer

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

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

或者在该项目文件夹中打开终端并输入“hs”。它将自动启动 HTTP 实时服务器。

score 2 · Accepted Answer

如果您坚持在.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或更新您的构建脚本以自动运行它。

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

score 1 · Accepted Answer

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

score 1 · Accepted Answer

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

score 1 · Accepted Answer

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

score 1 · Accepted Answer

对于 Linux Python 用户：

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

score 1 · Accepted Answer

如果您正在寻找 Firebase 托管的解决方案，您可以运行

firebase serve --only hosting来自Firebase CLI的命令

这就是我来这里的目的，所以我想我会把它留在这里帮助喜欢的人。

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

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

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

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

cursor:pointer;

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

0

如果您使用 VS 代码只是尝试在其中加载实时服务器。立即解决了我的问题。

于 2021-10-30T21:48:03.213 回答

score -1 · Accepted Answer

科尔多瓦实现了这一点。我仍然无法弄清楚科尔多瓦是如何做到的。它甚至不通过 shouldInterceptRequest。

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

当你想访问任何http资源时，webview会使用OPTIONS方法进行检查，你可以通过WebViewClient.shouldInterceptRequest通过返回响应来授予访问权限，对于下面的GET/POST方法，你可以只返回null。

score -1 · Accepted Answer

首先关闭所有chrome实例。

之后按照这个。

我在 mac 上使用了这个命令。

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

对于窗户：

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

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

30 回答 30

蟒蛇2

蟒蛇 3

节点.js

红宝石

PHP

Related

Reference