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

Posted 2023-05-08

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

【英文标题】："Cross origin requests are only supported for HTTP." error when loading a local file

【发布时间】：2019-12-31 08:35:36

【问题描述】：

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

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

【问题讨论】：

您是否尝试在本地执行此操作？

你需要使用localhost，即使它的本地文件

但它不能跨域！

如果您使用的是 Chrome，从终端使用 --allow-file-access-from-files 选项启动它可能会对您有所帮助。

是的，当文件与网页在同一个文件夹中时，它并不是真正的跨域，现在是......我发现如果你使用Firefox而不是Chrome，问题就消失了。

【参考方案1】：

我的水晶球说您正在使用file:// 或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)，它们就会被视为不同的来源。

【讨论】：

是的，我正在尝试使用file:// 执行此操作，但我不明白为什么允许这样做。好吧，我猜我正在安装 Lampp...

想象一下，如果允许的话，还有一个网页应用程序，页面的作者使用类似load('file://C:/users/user/supersecret.doc') 的东西，然后使用 ajax 等将内容上传到他们的服务器。

但是我正在尝试从我自己的目录中加载一些东西，甚至 index.html 也位于那里！

不幸的是，政策适用于所有情况，而不仅仅是您的 :(，所以你必须忍受它

您也可以在 chrome 中使用 --allow-file-access-from-files 开关。根据我的回答：***.com/questions/8449716/…

【参考方案2】：

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

这里有一些选项可以快速启动本地网络服务器，让您的浏览器呈现本地文件

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

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

【讨论】：

这为我节省了大量时间，谢谢。我的 Python 安装没有 SimpleHTTPServer 模块，但节点指令就像一个魅力。

响应 LukeP 的评论，在 python 2.7 中，该命令确实按照指令 $ python -m SimpleHTTPServer 工作，这会产生消息：Serving HTTP on 0.0.0.0 port 8000 ... 如果模块名称拼写错误，例如$ python -m SimpleHttpServer 然后您将收到错误消息 No module named SimpleHttpServer 如果您安装了 python3（v. python 2.7），您将收到类似的错误消息。您可以使用以下命令检查您的 python 版本：$ python --version。您还可以像这样指定要监听的端口：$ python -m SimpleHTTPServer 3333

python 服务器从您启动服务器的目录中提供文件。因此，如果您要提供的文件位于 /Users/7stud/angular_projects/1app 中，则在该目录中启动服务器，例如$ cd ~/angular_projects/1app，然后是 $ python -m SimpleHTTPServer。在您的浏览器中输入网址http://localhost:8000/index.html。您还可以在启动服务器的目录的子目录中请求文件，例如http://localhost:8000/subdir/hello.html

我听说Python简单而强大，就像“X”语言一样，但这太荒谬了！无需安装 XAMPP，或使用 node 设置一个简单的 http 服务器 js 来提供静态文件 - 一个命令和繁荣！非常感谢，节省了很多时间和麻烦。

太棒了！ - 对于 Windows 上的 Python，使用：python -m http.server 8080 ...或任何你想要的端口，当你想退出它时只需 ctrl-c。

【参考方案3】：

在 Chrome 中你可以使用这个标志：

--allow-file-access-from-files

Read more here.

【讨论】：

@Blairg23，请记住，此解决方案需要重新启动 Chrome.exe 的所有实例才能正常工作

请解释一下如何在chrome中使用它。

@Priya 不应该这样做

我建议仅将 Chromium 用于本地调试（以标志 --allow-file-access-from-files 开头）。这意味着使用 Chrome 进行普通网页浏览，并使用 Chromium 作为 HTML 文件的默认应用程序。

请注意，fetch() 仍然否认这一点。你必须以某种方式使用XMLHttpRequest

【参考方案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;
    );
);

唯一的区别是在第二个 sn-p 代码中缺少 http://。

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

【参考方案5】：

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

【讨论】：

+1 for Web Server for Chrome 应用链接 - 这是迄今为止最简单、最干净的 Chrome IMO 临时 httpd 设置解决方案

它救了我。确切的解决方案

【参考方案6】：

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

使用非常轻量级的npm 包：使用npm install -g live-server 安装live-server。然后，转到该目录打开终端并输入live-server 并按回车键，页面将在localhost:8080 提供。奖励：它还默认支持热重载。 使用谷歌开发的轻量级谷歌浏览器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 打开页面。注意：请勿不使用此快捷方式进行常规浏览。

注意：使用http:// 和http://localhost:8080 一样，以防遇到错误。

【参考方案7】：

在 android 应用中——例如，为了允许 javascript 通过 file:///android_asset/ 访问资产——在 WebSettings 上使用 setAllowFileAccessFromFileURLs(true)，就像在 WebView 上调用 getSettings() 获得的一样。

【讨论】：

太棒了！我们正要重写将 JSON 注入变量的方法 .. 但这行得通！ webView.getSettings().setAllowFileAccessFromFileURLs(true);

【参考方案8】：

使用http://或https://创建url

错误：localhost:8080

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

【讨论】：

完全相同的问题。我不知道我没有使用 http:

【参考方案9】：

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

python -m http.server

【参考方案10】：

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

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

【讨论】：

不再。 firefox 和 ie 都在阻止我的 cors 请求。

【参考方案11】：

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

【讨论】：

如果你安装了php或者已经安装了，你可以在你的文件夹中启动一个服务器：php.net/manual/es/features.commandline.webserver.php

【参考方案12】：

使用 VS Code 的简单解决方案

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

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

它基本上使用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]

希望它会帮助某人:)

【参考方案13】：

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

转到：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 文件名。

【讨论】：

运行http-server -c-1命令启动http服务器后，以后不关闭命令提示符的情况下要发出什么命令来停止它？

【参考方案14】：

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

【参考方案15】：

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

【参考方案16】：

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

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

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

【参考方案17】：

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

在~/Library/LaunchAgents 中保存一个名为whatever（例如launch.chrome.dev.mode.plist）的plist，其内容与...相似

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

多田！ ? ?? ? ??

【讨论】：

谢谢，@Alex Gray。你的方法对我有用。可以用于其他浏览器吗？如果是这样，我该怎么做？我用 Brave Browser 试了一下，还是不行。

【参考方案18】：

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

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

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

【讨论】：

重复答案

【参考方案19】：

如果您坚持在本地运行 .html 文件而不使用网络服务器提供它，您可以通过使有问题的资源内联可用来防止这些跨源请求的发生。

我在尝试通过 file:// 提供 .js 文件时遇到了这个问题。我的解决方案是更新我的构建脚本，用<script>...</script> 替换<script src="..."> 标签。 这是一个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的详细问题和解决方案。

【参考方案20】：

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

【参考方案21】：

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

【参考方案22】：

为 java 安装本地网络服务器，例如 Tomcat，对于 php，你可以使用 lamp 等 将 json 文件拖放到可公开访问的应用服务器目录中

启动app server，应该可以从localhost访问文件了

【参考方案23】：

对于 Linux Python 用户：

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

【讨论】：

google-chrome --allow-file-access-from-files <url> 没有理由不工作而且更简洁吗？

@agupta231 webbrowser 模块有参数可以让你进行不同类型的“打开”，例如。在当前标签页、新标签页、新窗口等中打开。

【参考方案24】：

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

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

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

【参考方案25】：

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

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

【参考方案26】：

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

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

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

cursor:pointer;

【参考方案27】：

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

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

【讨论】：

我不明白这个答案的反对意见，它确实解决了我在 Chrome 中的问题。

【参考方案28】：

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

【参考方案29】：

cordova 实现了这一点。我仍然无法弄清楚科尔多瓦是怎么做到的。它甚至没有通过 shouldInterceptRequest。

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

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

【参考方案30】：

首先关闭所有的chrome实例。

然后按照这个。

我在mac上用过这个命令。

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

对于窗户：

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