Question

我有三个非常简单的角度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的include，我就开始收到此错误：

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文档。要解决此问题，您需要从Web服务器提供代码并在localhost上访问它。如果您有Apache安装程序，请使用它来提供文件。有些IDE内置了Web服务器，比如JetBrains IDE，Eclipse ......

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

Answer 2

非常简单的修补

转到您的应用目录
启动SimpleHTTPServer

在终端

$ cd yourAngularApp
~/yourAngularApp $ python -m SimpleHTTPServer

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

Answer 3

Chrome中不允许该操作。您可以使用HTTP服务器（Tomcat），也可以使用Firefox。

Answer 4

我的问题只是通过将http://添加到我的网址来解决。例如，我使用了http://localhost:3000/movies而不是localhost:3000/movies。

Answer 5

如果由于某种原因你不能从网络服务器托管文件并仍然需要某种方式加载局部文件，你可以使用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 6

如果您在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

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

或者，您也可以根据您熟悉的语言在任何Web服务器上托管它（例如：Tomcat-java，NodeJS-JS，Tornado-Python等）。这可以在任何浏览器中使用。

Answer 7

<强>根本原因：

文件协议不支持Chrome的跨源请求

解决方案1：

使用http协议而不是文件，意思是：设置一个http服务器，如apache，或nodejs + http-server

Sotution 2：

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

解决方案3：

使用Firefox

Answer 8

我想补充一点，也可以使用xampp，mamp类型的东西，并将你的项目放在htdocs文件夹中，以便可以在localhost上访问

Answer 9

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

Answer 10

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

Answer 11

Firefox和Safari中没有发生此问题。确保您使用的是最新版本的xml2json.js。因为我在IE中遇到了XML解析器错误。在Chrome中，最好的方法是在Apache或XAMPP等服务器上打开它。

Answer 12

有一个chrome扩展程序200ok它是一个用于chrome的Web服务器，只需添加它并选择你的文件夹

Answer 13

原因

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

解决方案

运行inetmgr并在本地托管您的页面并浏览http://localhost:portnumber/PageName.html或通过Apache，nginx，节点等Web服务器。

或者使用其他浏览器使用Firefox和Safari直接打开页面时没有显示错误。它仅适用于Chrome和IE（xx）。

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

Answer 14

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

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

Answer 15

添加@Kirill Fuchs出色的解决方案并回答@ StackUser的疑问 - 启动http服务器时，只设置路径直到app文件夹，直到html页面！ http-server C:\location\to\app并访问index.html文件夹

下的app

Answer 16

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

Answer 17

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

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

AngularJS错误：仅支持协议方案的跨源请求：http，数据，chrome扩展，https

17 个答案: