加载本地文件时出现“Cross origin requests are supported only for HTTP.”错误

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

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

Origin 在 RFC-6454 中定义为

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

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

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

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

Python 2 中文文档

如果您安装了 Python...

1. 使用命令将目录更改为文件所在的文件夹some.htmlcd /path/to/your/folder

2. 使用命令启动 Python Web 服务器python -m SimpleHTTPServer

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

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

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

Python 3 （英语）

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

VSCode

如果使用的是 Visual Studio Code，则可以安装 Live Server 扩展，该扩展提供本地 Web 服务器环境。

节点 .js

或者，如果您需要响应速度更快的设置并且已经在使用 nodejs...

1. 通过键入安装http-servernpm install -g http-server

2. 进入您的工作目录，您居住的地方some.html

3. 通过发出以下命令启动 http 服务器http-server -c-1

这将启动一个 Node.js httpd，它将目录中的文件作为可从以下位置访问的静态文件http://localhost:8080

红宝石

如果你的首选语言是 Ruby ...红宝石之神说这也有效：

ruby -run -e httpd . -p 8080

PHP的

当然，PHP也有其解决方案。

php -S localhost:8000

今天遇到了这个。

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

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://

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

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

--allow-file-access-from-files

在这里阅读更多： 如何在“--allow-file-access-from-files”模式下使用 Chrome 启动 html？

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

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

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

此外，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 错误。

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

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

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

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

保存一个 ，名为 any （，例如） 在具有类似内容的 ...plistlaunch.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

多田！😎 💁🏻 🙊 🙏🏾

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

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

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

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

在 Android 应用中（例如，允许 JavaScript 通过以下方式访问资产），请使用 on 您通过调用 .file:///android_asset/setAllowFileAccessFromFileURLs(true)WebSettingsgetSettings()WebView

我建议你使用迷你服务器在本地主机上运行这些类型的应用程序（如果你没有使用一些内置服务器）。

下面是一个非常易于设置和运行的方法：

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

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

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

注意：以防您遇到错误。http://http://localhost:8080

如果您使用旧版本的Mozilla Firefox（2019年之前），它将按预期工作，没有任何问题;

P.S. 令人惊讶的是，旧版本的Internet Explorer和Edge也绝对可以正常工作。

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

• 

• 启动应用服务器，您应该能够从 localhost 访问该文件

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

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

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

cursor:pointer;

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

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

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

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

1. 转到：https://nodejs.org/en/download/。安装 nodejs。

2. 通过从命令提示符运行命令来安装 http-server。npm install -g http-server

3. 切换到您的工作目录，其中 / 驻留。index.htmlyoursome.html

4. 通过运行命令启动 http 服务器http-server -c-1

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

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

python -m http.server

使用 或 创建 urlhttp://https://

错误：localhost:8080

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

使用 VS Code 的简单解决方案

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

它允许您轻松打开实时服务器。由于它创建了服务器，因此问题正在解决。您只需打开一个 HTML 文件并右键单击编辑器，然后单击 .localhostlocalhostOpen with Live Server

它基本上使用 而不是 使用 .http://localhost/index.htmlfile://...

编辑

没有必要有文件。您可以使用快捷方式启动 Live Server。.html

点击打开服务器并停止服务器。[在 MAC 上，以及(alt+L, alt+O)(alt+L, alt+C)cmd+L, cmd+Ocmd+L, cmd+C]

希望它能帮助:)的人

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

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

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

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

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

对于 Linux Python 用户：

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

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

我在尝试通过 .我的解决方案是更新我的构建脚本以将标签替换为 . 下面是执行此操作的方法：.jsfile://<script src="..."><script>...</script>gulp

1. 运行到包 ，然后 .npm install --save-devgulpgulp-inlinedel

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

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

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

firebase serve --only hostingFirebase CLI 中的命令

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

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

url 应如下所示：

 createUserURL = "http://www.localhost:3000/api/angular/users"

而不是：

 createUserURL = "localhost:3000/api/angular/users"