程序问答   发布时间:2022-06-02  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了AngularJS错误:仅协议方案支持跨源请求:http,数据,chrome扩展名,https大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

如何解决AngularJS错误:仅协议方案支持跨源请求:http,数据,chrome扩展名,https?

开发过程中遇到AngularJS错误:仅协议方案支持跨源请求:http,数据,chrome扩展名,https的问题如何解决?下面主要结合日常开发的经验,给出你关于AngularJS错误:仅协议方案支持跨源请求:http,数据,chrome扩展名,https的解决方法建议,希望对你解决AngularJS错误:仅协议方案支持跨源请求:http,数据,chrome扩展名,https有所启发或帮助;

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

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

解决方法

我有一个非常简单的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 scheR_438_11845@es: 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/

大佬总结

以上是大佬教程为你收集整理的AngularJS错误:仅协议方案支持跨源请求:http,数据,chrome扩展名,https全部内容,希望文章能够帮你解决AngularJS错误:仅协议方案支持跨源请求:http,数据,chrome扩展名,https所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。