Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
537 views
in Technique[技术] by (71.8m points)

javascript - AngularJS错误:仅支持协议方案的跨源请求:http,数据,chrome扩展,https(AngularJS Error: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https)

I have three files of a very simple angular js application(我有三个非常简单的角度js应用程序的文件)

index.html(的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(产品color.html) <div class="list-group-item"> <h3>Hello <em class="pull-right">Brother</em></h3> </div> app.js(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:(一旦我使用名为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'. What may be going wrong?(可能出现什么问题?) Is it a path issue for product-color.html?(这是product-color.html的路径问题吗?) All my three files are in the same root folder C:/user/project/(我的三个文件都在同一根文件夹C:/user/project/)   ask by user3422637 translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

This error is happening because you are just opening html documents directly from the browser.(发生此错误是因为您只是直接从浏览器打开html文档。)

To fix this you will need to serve your code from a webserver and access it on localhost.(要解决此问题,您需要从Web服务器提供代码并在localhost上访问它。) If you have Apache setup, use it to serve your files.(如果您有Apache安装程序,请使用它来提供文件。) Some IDE's have built in web servers, like JetBrains IDE's, Eclipse...(有些IDE内置了Web服务器,比如JetBrains IDE,Eclipse ......) If you have Node.Js setup then you can use http-server .(如果你有Node.Js设置,那么你可以使用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 .(只需运行npm install http-server -g ,您就可以在终端中使用它,如http-server C:\location\to\app 。)

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...