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

问题描述 投票：124回答：16

我有三个非常简单的角度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/中

javascript html angularjs xmlhttprequest
16个回答
295
投票

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

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

2
投票
  1. 安装http-server，运行命令npm install http-server -g
  2. 在index.html的路径中打开终端
  3. 运行命令http-server . -o
  4. 好好享受！
1
投票

原因

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

解决方案

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

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

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

1
投票

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

1
投票

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

0
投票

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

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

0
投票

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

-1
投票

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

var cors = require('cors')
app.use(cors());
48
投票

非常简单的修复

  1. 转到您的app目录
  2. 启动SimpleHTTPServer

在终端

$ cd yourAngularApp
~/yourAngularApp $ python -m SimpleHTTPServer

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

41
投票

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

31
投票

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

12
投票

如果您在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等）。这适用于任何浏览器。

11
投票

如果由于某种原因您无法从Web服务器托管文件并仍然需要某种方式加载partials，您可以使用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'
      };
   }
  );
5
投票

根本原因：

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

解决方案1：

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

解决方案2：

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

enter image description here

解决方案3：

请改用Firefox

3
投票

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

2
投票

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.