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

130

我有一个非常简单的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>

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

— 用户名
source

1

只是一个快速指针，如果您做一些愚蠢的事情，例如在我的情况下，我不小心将TLD附加到端口：“ localhost：8070.com ”，那么您将收到相同的错误。检查您要解析的URL！

— Wildhoney，2015年

也许类似于此：stackoverflow.com/questions/10752055/...

— 区总主教Đức团

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

306

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

如果您已安装Node.Js，则可以使用http-server。只需运行npm install http-server -g，您就可以在像这样的终端中使用它http-server C:\location\to\app。

— 基里尔·福克斯（Kirill Fuchs）
source

6

优秀的解决方案！

— 豪尔赫

3

http服务器是我见过在本地托管的最简单方法。注意：如果Windows上没有npm，只需安装node.js，它将在cmd中可用。

— 辛烷值

3

如果它发生在android的webview中，该怎么办！

— Dr.jacky 2015年

2

出于好奇，为什么不能仅在Web浏览器中打开文件？

— tobiak777 '16

3

@reddy简单明了：浏览器直接在您的计算机上访问文件系统是一个安全问题。

— Alex J

49

非常简单的修复

转到您的应用目录
启动SimpleHTTPServer

在终端

$ cd yourAngularApp
~/yourAngularApp $ python -m SimpleHTTPServer

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

— 奇拉格
source

8

在Python 3中，应该为python -m http.server。

— Luan Nico 2015年

1

这帮了很多忙！很好的解决方案。

— mirta，2017年

42

chrome中不允许执行此操作。您可以使用HTTP服务器（Tomcat），也可以使用Firefox。

— 丹尼尔
source

4

在我的情况下，我改用了Firefox，它可以正常工作。Chrome是否比Firefox具有更高的安全性？我为什么可以这样做....

— thatOneGuy 2015年

那对我来说是最好的答案。

— 托马斯

1

简短而简单...有效！

— 维克斯

真的也帮了我

— 拉姆·杜特·舒克拉

1

嘿..非常感谢..您的回答提供了很大帮助...节省了我很多时间

— Megha

31

只需添加http://到我的网址即可解决我的问题。例如我用http://localhost:3000/movies代替localhost:3000/movies。

— 阿里·塞普里（Kh）
source

13

如果您在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或Chrome格式加载文件。如果您必须对Windows执行相同的操作，则可以将此开关添加到chrome快捷方式的属性中，也可以从cmd带有标志的位置运行它。默认情况下，Chrome，Opera，Internet Explorer中不允许执行此操作。默认情况下，它仅适用于Firefox和Safari。因此，使用此命令将对您有所帮助。

或者，您也可以根据自己喜欢的语言将其托管在任何Web服务器（例如：Tomcat-java，NodeJS-JS，Tornado-Python等）上。在任何浏览器中都可以使用。

— 特茹斯·普拉萨德（Tejus Prasad）
source

12

如果出于某种原因您无法从Web服务器托管文件，但仍需要某种方式加载部分文件，则可以使用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'
      };
   }
  );

— 链接64
source

正如我已经编辑这篇文章使用templateUrl：“TPL-productColor”

— HANU

5

根本原因：

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

解决方案1：

使用http协议代替文件，这意味着：设置一个http服务器，例如apache或nodejs + http-server

解决方案2：

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

解决方案3：

改用Firefox

— 提摩太·李
source

使用Firefox对我有帮助

— Vineeth Subbaraya

5

安装http服务器，运行命令 npm install http-server -g
在index.html所在的路径中打开终端
运行命令 http-server . -o
好好享受！

— 迈克尔·霍塔·弗莱塔斯（Michael Horta Fleitas）
source

4

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

— 子弹头列车
source

2

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

— 爱迪生·杜萨（Edison D'souza）
source

谢谢男人，两个小时寻找相同问题的解决方案，这是...

— Santi Nunez

欢迎兄弟快乐编码：)

— 爱迪生D'souza

1

原因

您不是通过诸如Apache之类的服务器打开页面，因此，当浏览器尝试获取其认为来自单独域的资源时，这是不允许的。尽管某些浏览器确实允许这样做。

解决方案

运行inetmgr并在本地托管页面，并以http：// localhost：portnumber / PageName.html或通过Web服务器（如Apache，nginx，node等）进行浏览。

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

如果您使用的是括号，Sublime或Notepad ++之类的代码编辑器，则这些应用程序会自动处理此错误。

— Virendra Shenvi Velingkar
source

1

在Firefox和Safari中不会发生此问题。确保您使用的是最新版本的xml2json.js。因为我在IE中遇到XML解析器错误。以Chrome最好的方式，您应该在Apache或XAMPP之类的服务器中将其打开。

— Shantha Moorthy K
source

1

有一个chrome扩展名200ok，它是一个chrome的网络服务器，只需添加它并选择您的文件夹

— 高拉夫·穆拉尼
source

出色的解决方案

— Mohamed Adel

0

您必须使用以下标志打开chrome进入运行菜单，然后输入“ chrome --disable-web-security --user-data-dir”

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

— 玛纳斯
source

0

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

— 特贾斯维尼
source

0

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

— to病
source

-1

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

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

— 苏伦德拉·帕丘鲁（Surendra Parchuru）
source