AngularJS Error: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https

Question

我有一个非常简单的 angular js 应用程序的三个文件

index.html

<!DOCTYPE html>
<html ng-app="gemStore">
  <head>
    <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js'></script>
    <script type="text/javascript" src="app.js"></script>
  </head>

  <body ng-controller="StoreController as store">
      <div class="list-group-item" ng-repeat="product in store.products">
        <h3>{{product.name}} <em class="pull-right">{{product.price | currency}}</em></h3>
      </div>

  <product-color></product-color>
  </body>
</html>

产品-color.html

<div class="list-group-item">
    <h3>Hello <em class="pull-right">Brother</em></h3>
</div>

app.js

(function() {
  var app = angular.module('gemStore', []);

  app.controller('StoreController', function($http){
              this.products = gem;
          }
  );

  app.directive('productColor', function() {
      return {
          restrict: 'E', //Element Directive
          templateUrl: 'product-color.html'
      };
   }
  );

  var gem = [
              {
                  name: "Shirt",
                  price: 23.11,
                  color: "Blue"
              },
              {
                  name: "Jeans",
                  price: 5.09,
                  color: "Red"
              }
  ];

})();

使用名为 productColor:

的自定义指令输入包含 product-color.html 后，我就开始收到此错误

XMLHttpRequest cannot load file:///C:/product-color.html. Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource.
angular.js:11594 Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///C:/product-color.html'.

可能出了什么问题？是 product-color.html 的路径问题吗？

我的三个文件都在同一个根文件夹中C:/user/project/

Answer 1

发生此错误是因为您只是直接从浏览器打开 html 文档。要解决此问题，您需要从网络服务器提供您的代码并在本地主机上访问它。如果您安装了 Apache，请使用它来提供您的文件。一些 IDE 已内置 Web 服务器，例如 JetBrains IDE、Eclipse...

如果您有 Node.Js 设置，那么您可以使用 http-server。只需运行 npm install http-server -g 即可在终端中使用它，例如 http-server C:\location\to\app.

Answer 2

我要补充一点，也可以使用 xampp，mamp 类型的东西并将您的项目放在 htdocs 文件夹中，以便可以在本地主机上访问它

Answer 3

chrome 中不允许该操作。您可以使用 HTTP 服务器(Tomcat)，也可以改用 Firefox。

Answer 4

如果出于某种原因您无法从网络服务器托管文件并且仍然需要某种加载部分的方式，您可以求助于使用ngTemplate指示。

这样，您可以将标记包含在 index.html 文件的脚本标记内，而不必将标记包含为实际指令的一部分。

将此添加到您的 index.html

<script type='text/ng-template' id='tpl-productColour'>
 <div class="list-group-item">
    <h3>Hello <em class="pull-right">Brother</em></h3>
</div>
</script>

然后，在你的指令中：

app.directive('productColor', function() {
      return {
          restrict: 'E', //Element Directive
          //template: 'tpl-productColour'
          templateUrl: 'tpl-productColour'
      };
   }
  );

Answer 5

原因

您没有通过服务器（如 Apache）打开页面，因此当浏览器尝试获取资源时，它认为它来自单独的域，这是不允许的。虽然有些浏览器确实允许它。

解决方案

运行 inetmgr 并在本地托管您的页面并以 http://localhost:portnumber/PageName.html 或通过 Apache、nginx、node 等网络服务器浏览

或者使用不同的浏览器使用 Firefox 和 Safari 直接打开页面时没有显示错误。它仅适用于 Chrome 和 IE(xx)。

如果您使用的是 Brackets、Sublime 或 Notepad++ 等代码编辑器，这些应用程序会自动处理此错误。

Answer 6

非常简单的修复

转到您的应用程序目录
启动 SimpleHTTPServer

在终端

$ cd yourAngularApp
~/yourAngularApp $ python -m SimpleHTTPServer

现在，在浏览器中转到 localhost:8000，页面将显示

Answer 7

如果您在 chrome/chromium 浏览器中使用它（例如：在 Ubuntu 14.04 中），您可以使用以下命令之一来解决此问题。

ThinkPad-T430:~$ google-chrome --allow-file-access-from-files
ThinkPad-T430:~$ google-chrome --allow-file-access-from-files fileName.html

ThinkPad-T430:~$ chromium-browser --allow-file-access-from-files
ThinkPad-T430:~$ chromium-browser --allow-file-access-from-files fileName.html

这将允许您在 chrome 或 chromium 中加载文件。如果您必须对 windows 执行相同的操作，您可以在 chrome 快捷方式的属性中添加此开关，或者使用标志从 cmd 运行它。默认情况下，Chrome、Opera、Internet Explorer 中不允许此操作。默认情况下，它仅适用于 firefox 和 safari。因此，使用此命令将对您有所帮助。

或者，您也可以根据您使用的语言将其托管在任何网络服务器上（示例：Tomcat-java、NodeJS-JS、Tornado-Python 等）舒适。这适用于任何浏览器。

Answer 8

只需将 http:// 添加到我的 url 地址，我的问题就得到了解决。例如我使用 http://localhost:3000/movies 而不是 localhost:3000/movies.

Answer 9

这个问题不会在 Firefox 和 Safari 中发生。确保您使用的是最新版本的 xml2json.js。因为我在 IE 中遇到 XML 解析器错误。 Chrome 最好的方法是在 Apache 或 XAMPP.

等服务器中打开它

Answer 10

有一个 chrome 扩展 200ok 它是 chrome 的 Web 服务器只需添加它和 select 您的文件夹

Answer 11

您必须使用以下标志打开 chrome 转到运行菜单并输入 "chrome --disable-web-security --user-data-dir"

确保在使用标志打开 chrome 之前关闭 chrome 的所有实例。您将收到指示 CORS 已启用的安全警告。

Answer 12

如果您已经是运行服务器，请不要忘记在 API 调用中使用 http://。这可能会造成严重的麻烦。

Answer 13

添加到@Kirill Fuchs 的优秀解决方案并回答@StackUser 的疑问 - 在启动 http 服务器时，仅将路径设置为应用程序文件夹，而不是 html 页面！ http-server C:\location\to\app 并访问 app 文件夹下的 index.html

Answer 14

根本原因：

文件协议不支持 Chrome

的跨源请求

解决方案一：

使用http协议代替file，意思是：搭建一个http服务器，比如apache，或者nodejs+http-server

方案二：

添加--allow-file-access-from-files 在 Chrome 的快捷方式目标之后，并使用它打开新的浏览器实例捷径

方案三：

改用 Firefox

Answer 15

安装 http 服务器，运行命令 npm install http-server -g
在index.html
运行命令http-server . -o
尽情享受吧！

Answer 16

我遇到了同样的问题。将以下代码添加到我的 app.js 文件后，它已修复。

var cors = require('cors')
app.use(cors());

Answer 17

导航到 C:/user/project/index.html，使用 Visual Studio 2017 打开它，文件 > 在浏览器中查看或按 Ctrl+Shift+W

AngularJS Error: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https

AngularJS Error: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https

html

javascript

xmlhttprequest

angularjs