AngularJS 错误:跨源请求仅支持协议方案:http、data、chrome-extension、https

2022-01-15 00:00:00 angularjs xmlhttprequest javascript html

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

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

})();

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

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

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

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

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

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

推荐答案

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

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

如果您有 Node.Js 设置，那么您可以使用 http-server.只需运行 npm install http-server -g 即可在终端中使用它，例如 http-server C:location oapp.

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

相关文章