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

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

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

起源在RFC-6454中定义为

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

因此，即使您的文件来自同一个主机（localhost），但只要方案不同（http/file），它们就会被视为不同的来源。

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

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

python2

如果你安装了Python…

1. 使用命令cd /path/to/your/folder将目录更改为文件some.html或文件存在的文件夹

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

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

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

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

python3

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

VSCode

如果您使用的是Visual Studio代码，您可以安装Live Server扩展，它提供了本地Web服务器环境。

Node.js

或者，如果您需要更具响应性的设置并且已经使用了nodejs…

1. 输入npm install -g http-server安装http-server

2. 切换到您的some.html所在的工作目录

3. 通过发出http-server -c-1启动超文本传输协议服务器

这会产生一个Node.js的htpd，它将目录中的文件作为静态文件提供，可从http://localhost:8080 访问

ruby

如果你的首选语言是Ruby……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

阅读更多这里。

当我在浏览器上加载一个超文本标记语言文件时，从本地目录中使用json文件时，我得到了这个确切的错误。在我的例子中，我能够通过创建一个允许服务器静态内容的简单节点服务器来解决这个问题。我把代码留在了这个其他答案。

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

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

此外，Z-WAMP是一个100%可移植的WAMP，在单个文件夹中运行，太棒了。如果您需要快速的PHP和MySQL服务器，这是一个选项。虽然它自2013年以来没有更新过。一个现代的替代方案是拉拉贡或WinNMP。我没有测试过它们，但它们是可移植的，值得一提。

此外，如果你只想要绝对的基础知识（超文本标记语言+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。

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

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

对于MacOS上的所有人……设置一个简单的启动代理，在你自己的Chrome副本中启用这些迷人的功能……

在~/Library/LaunchAgents中保存一个plist，名为无论（例如launch.chrome.dev.mode.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

TADA！😎💁🏻🙊🙏🏾

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

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

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

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

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

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

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

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

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

1. 使用非常轻量级的#0包：使用npm install -g live-server安装直播间。然后，转到该目录打开终端并键入live-server并按回车键，页面将在localhost:8080处提供。奖励：它还默认支持热重载。
2. 使用Google开发的轻量级GoogleChrome应用程序：安装应用程序，然后转到Chrome中的应用程序选项卡并打开应用程序。在应用程序中将其指向正确的文件夹。您的页面将被送达！
3. 修改窗口中的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如果你面对错误。

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

P. S.令人惊讶的是，IntenetExplorer_Edge工作得非常好！！！

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

• 

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

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

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

In my case an a tag was being used to get the 'Pointer Cursor' and the event was actually controlled by some jQuery on click event. I removed the href and added a class that applies:

cursor:pointer;

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

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

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

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

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

2. 通过从命令提示符npm install -g http-server运行命令安装超文本传输协议-server。

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

4. 通过运行命令http-server -c-1启动超文本传输协议服务器

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

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

python -m http.server

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

错误：localhost:8080

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

使用VS Code的简单解决方案

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

它允许您轻松打开实时服务器。由于它创建了localhost服务器，问题正在解决。您可以通过打开超文本标记语言文件并右键单击编辑器并单击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]

希望能帮助到别人：）

科尔多瓦实现了这一点。我仍然无法弄清楚科尔多瓦是如何做到的。它甚至没有通过应该拦截请求。

后来我发现，从本地加载任何文件的关键是：myWebView.get设置（）. setAllowUniversalAccessFromFileURLs（true）；

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

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

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

对于LinuxPython用户：

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

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

我在尝试通过file://提供.js文件时遇到了这个问题。我的解决方案是更新我的构建脚本以将<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或更新构建脚本以自动运行它。

您可以看到我的案例这里的详细问题和解决方案。

如果您正在搜索Firebase托管解决方案，您可以运行

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

这就是我来这里的原因，所以我想我应该把它留在这里，像那些人一样帮忙。

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

url应该像：

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

而不是：

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