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

我的水晶球说您正在使用 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://some/path/some.html

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

蟒蛇2

如果你安装了 Python...

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

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

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

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

蟒蛇 3

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

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

---

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

--allow-file-access-from-files

Read more here.

---

今天跑到这个了。

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

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。这将解决问题。

---

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

使用非常轻量级的 npm 包：使用 npm install -g live-server 安装 live-server。然后，转到该目录，打开终端并键入 live-server 并按回车，页面将在 localhost:8080 提供。奖励：默认情况下它还支持热重载。使用由谷歌开发的轻量级谷歌浏览器应用程序：安装应用程序，然后转到 Chrome 中的应用程序选项卡并打开应用程序。在应用程序中将其指向正确的文件夹。您的页面将被提供！在 windows 中修改 Chrome 快捷方式：创建 Chrome 浏览器的快捷方式。右键单击图标并打开属性。在属性中，将目标编辑为 "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="C:/ChromeDevSession" 并保存。然后使用 Chrome 使用 ctrl+o 打开页面。注意：请勿使用此快捷方式进行常规浏览。

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

---

在 Android 应用程序中（例如，允许 JavaScript 通过 file:///android_asset/ 访问资产）在 WebSettings 上使用 setAllowFileAccessFromFileURLs(true)，您可以通过在 WebView 上调用 getSettings() 获得。

---

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

错误：localhost:8080

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

---

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

python -m http.server

---

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

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

---

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

---

使用 VS Code 的简单解决方案

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

希望它会帮助某人:)

---

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

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

---

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

---

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

---

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

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

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

---

对于 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

多田！ 😎💁🏻🙊🙏🏾

---

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

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

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

---

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

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

1. 对包 gulp、gulp-inline 和 del 运行 npm install --save-dev。

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 的详细问题和解决方案。

---

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

---

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

---

为 java 安装本地网络服务器，例如 Tomcat，对于 php，您可以使用 lamp 等

将 json 文件拖放到公共可访问的应用服务器目录中

启动应用程序服务器，您应该可以从 localhost 访问该文件

---

对于 Linux Python 用户：

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

---

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

Firebase CLI 中的 firebase serve --only hosting 命令

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

---

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

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

---

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

标签示例

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

光标：指针；

---

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

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

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

---

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

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

---

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

---