AngularJS 错误:仅协议方案支持跨源请求:http、data、chrome-extension、https [英] AngularJS Error: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https

查看：57 发布时间：2021/11/9 1:47:42 javascript html angularjs xmlhttprequest

本文介绍了AngularJS 错误:仅协议方案支持跨源请求:http、data、chrome-extension、https的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

index.html

<html ng-app="gemStore"><头><script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js'></script><script type="text/javascript" src="app.js"></script><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 |货币}}</em></h3>

<产品颜色></产品颜色></html>

product-color.html


<h3>你好 <em class="pull-right">Brother</em></h3>

app.js

(function() {var app = angular.module('gemStore', []);app.controller('StoreController', function($http){this.products = gem;});app.directive('productColor', function() {返回 {限制:'E'，//元素指令templateUrl: 'product-color.html'};});var gem = [{name: "衬衫",价格:23.11，颜色:蓝色"},{name: "牛仔裤",价格:5.09，红色"}];})();

我使用名为 productColor 的自定义指令输入 product-color.html 的包含后立即开始收到此错误:

XMLHttpRequest 无法加载 file:///C:/product-color.html.跨源请求仅支持以下协议方案:http、data、chrome-extension、https、chrome-extension-resource.angular.js:11594 错误:无法在XMLHttpRequest"上执行发送":无法加载file:///C:/product-color.html".

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

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

解决方案

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

如果您安装了 Node.Js，那么您可以使用 http-server.只需运行 npm install http-server -g，您就可以在终端中使用它，例如 http-server C:\location\to\app.

I have three files of a very simple angular js application

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"
              }
  ];

})();

I started getting this error as soon as I entered an include of product-color.html using custom directive named productColor:

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'.

What may be going wrong? Is it a path issue for product-color.html?

All my three files are in the same root folder C:/user/project/

解决方案

This error is happening because you are just opening html documents directly from the browser. To fix this you will need to serve your code from a webserver and access it on localhost. If you have Apache setup, use it to serve your files. Some IDE's have built in web servers, like JetBrains IDE's, Eclipse...

If you have Node.Js setup then you can use http-server. Just run npm install http-server -g and you will be able to use it in terminal like http-server C:\location\to\app.

这篇关于AngularJS 错误:仅协议方案支持跨源请求:http、data、chrome-extension、https的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

AngularJS 错误:仅协议方案支持跨源请求:http、data、chrome-extension、https [英] AngularJS Error: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

AngularJS 错误:仅协议方案支持跨源请求:http、data、chrome-extension、https [英] AngularJS Error: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭