堆栈内存溢出
  繁体   English   中英

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

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

 原文  2015-01-02 12:15:36  1   17    javascript/ html/ angularjs/ xmlhttprequest

问题描述

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

17 个解决方案

解决方案1
 296 已采纳  2015-01-02 14:01:07

发生此错误是因为您只是直接从浏览器打开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
 48  2015-04-30 04:31:15

非常简单的修复

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


在终端 

$ cd yourAngularApp
~/yourAngularApp $ python -m SimpleHTTPServer

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

解决方案3
 41  2015-03-30 15:42:12

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

解决方案4
 31  2015-11-03 20:28:26

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

解决方案5
 12  2015-04-14 13:47:15

如果由于某种原因您无法从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'
      };
   }
  );

解决方案6
 12  2015-05-12 10:48:14

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

解决方案7
 5  2017-08-11 05:35:49

根本原因：

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

解决方案1：

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

Sotution 2：

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

在此输入图像描述

解决方案3：

请改用Firefox

解决方案8
 3  2015-02-14 15:26:36

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

解决方案9
 2  2016-11-15 13:03:20

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

解决方案10
 2  2017-12-15 14:36:03

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

解决方案11
 1  2015-04-24 05:04:40

原因

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

解决方案

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

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

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

解决方案12
 1  2015-11-20 06:10:11

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

解决方案13
 1  2016-10-02 09:21:31

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

解决方案14
 0  2016-11-02 18:40:44

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

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

解决方案15
 0  2017-03-10 04:13:25

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

解决方案16
 0  2019-07-29 07:17:43

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

解决方案17
 -1  2017-12-17 19:06:49

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

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 交叉源请求仅支持协议方案：http，数据，chrome，chrome-extension，https 无法加载“ username：password http：//链接：仅协议方案http，数据，chrome，chrome扩展名支持跨源请求 仅协议方案支持React Native WebView Cross起源请求：http，data，chrome，https 跨源请求仅支持协议方案：http 交叉原始请求仅支持协议方案中的错误响应 使用角度路由时出现错误仅协议方案仅支持跨源请求：http XMLHttpRequest仅服务器的协议方案支持跨源请求 Angular2中的协议方案问题仅支持跨源请求 本地主机-仅协议方案支持跨源请求？ 为什么我的catch块无法捕获“协议方案仅支持跨源请求：http…”
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM