Ошибка AngularJS: перекрестные исходные запросы поддерживаются только для схем протоколов: http, data, chrome-extension, https

Question

Ошибка AngularJS: перекрестные исходные запросы поддерживаются только для схем протоколов: http, data, chrome-extension, https

у меня есть три файла очень простого углового приложения js

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

товар-цвет.HTML-код

<div class="list-group-item">

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

</div>

приложение.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"

              }

  ];



})();

я начал получать эту ошибку, как только я ввел включить продукт-цвет.html с использованием пользовательской директивы 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'.

что может быть не так? Это вопрос пути для продукта-цвет.HTML-код?

все мои три файла находятся в одной корневой папке C:/user/project/

1039 16

javascript html xmlhttprequest angularjs

16 ответов:

Comments

Ничего не найдено.

Kirill Fuchs · Accepted Answer · 2016-04-01 17:21:44

эта ошибка происходит потому, что вы просто открываете html-документы непосредственно из браузера. Чтобы исправить это, вам нужно будет обслуживать ваш код с веб-сервера и получить к нему доступ на localhost. Если у вас есть Apache setup, используйте его для обслуживания ваших файлов. Некоторые IDE имеют встроенные веб-серверы, такие как JetBrains IDE, Eclipse...

Если у вас есть узел.JS setup, то вы можете использовать http-сервер. Просто беги npm install http-server -g и вы сможете использовать его в терминал как http-server C:\location\to\app.

Chirag · Accepted Answer · 2015-04-30 07:31:15

ОЧЕНЬ ПРОСТОЕ ИСПРАВЛЕНИЕ

перейдите в каталог приложений

Start SimpleHTTPServer

В терминале
$ cd yourAngularApp
~/yourAngularApp $ python -m SimpleHTTPServer
Теперь перейдите на localhost: 8000 в вашем браузере, и страница покажет

daniel · Accepted Answer · 2015-04-21 10:05:02

операция не разрешена в chrome. Вы можете либо использовать HTTP-сервер(Tomcat), либо использовать Firefox.

Ali Sepehri.Kh · Accepted Answer · 2015-11-03 22:28:26

моя проблема была решена просто путем добавления http:// на мой url-адрес. например, я использовал http://localhost:3000/movies вместо localhost:3000/movies.

Tejus Prasad · Accepted Answer · 2015-05-12 15:28:30

Если вы используете это в браузере 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
Это позволит вам загрузить файл в chrome или chromium. Если вам нужно выполнить ту же операцию для windows, вы можете добавить этот переключатель в свойства ярлыка chrome или запустить его из cmd с флагом. Эта операция не разрешена в Chrome, Opera, Internet Explorer по умолчанию. По умолчанию он работает только в Firefox и сафари. Следовательно, использование этой команды поможет вам.

альтернативно вы также можете разместить его на любом веб-сервере (например:Tomcat-java,NodeJS-JS,Tornado-Python и т. д.) На основе того, какой язык вам удобен. Это будет работать из любого браузера.

link64 · Accepted Answer · 2015-07-10 10:33:43

Если по какой-то причине вы не может есть файлы, размещенные с веб-сервера и все еще нужен какой-то способ загрузки частичных файлов, вы можете прибегнуть к использованию

Timothy.Li · Accepted Answer · 2017-08-11 08:35:49

RootCause:

файловый протокол не поддерживает запрос cross origin для Chrome

Решение 1:

использовать протокол http вместо файла, что означает: настроить http-сервер, например apache, или nodejs+http-server

Sotution 2:

добавить --allow-file-access-from-files после назначения ярлыка Chrome и откройте новый экземпляр обзора с помощью этот ярлык

решение 3:

используйте Firefox вместо

bullettrain · Accepted Answer · 2015-02-14 17:26:36

Я бы добавил, что можно также использовать xampp, тип mamp вещей и поместить свой проект в папку htdocs, чтобы он был доступен на localhost

Edison D'souza · Accepted Answer · 2016-11-15 15:03:20

Если вы уже используете сервер, не забудьте использовать http:// в вызове API. Это может вызвать серьезные проблемы.

Virendra Shenvi Velingkar · Accepted Answer · 2015-04-24 08:04:40

Причина

вы не открываете страницу через сервер, как Apache, поэтому, когда браузер пытается получить ресурс, он думает, что это из отдельного домена, что не допускается. Хотя некоторые браузеры это позволяют.

Решение

запустите inetmgr и разместите свою страницу локально и просмотрите как http://localhost:portnumber/PageName.HTML-код или через веб-сервер, как Apache, nginx, узел так далее.

альтернативно используйте другой браузер Ошибка не была показана при непосредственном открытии страницы с помощью Firefox и Safari. Он поставляется только для Chrome и IE (xx).

Если вы используете редакторы кода, такие как скобки, Sublime или Notepad++, эти приложения обрабатывают эту ошибку автоматически.

Shantha Moorthy K · Accepted Answer · 2015-11-20 08:10:11

эта проблема не происходит в Firefox и Safari. Убедитесь, что вы используете последнюю версию xml2json.js. Потому что я столкнулся с ошибкой синтаксического анализатора XML в IE. В Chrome лучше всего вы должны открыть его на сервере, таком как Apache или XAMPP.

gaurav moolani · Accepted Answer · 2016-10-02 12:21:31

есть расширение chrome 200ok его веб-сервер для chrome просто добавьте это и выберите папку

Michael Horta Fleitas · Accepted Answer · 2017-12-15 16:36:03

установите http-сервер, запустив команду npm install http-server -g

откройте терминал в пути, где находится индекс.HTML-код

выполнить команду http-server . -o

наслаждайтесь!

Manas · Accepted Answer · 2016-11-02 20:40:44

вы должны открыть Chrome, используя следующий флаг Перейдите в меню Выполнить и введите "chrome -- disable-web-security --user-data-dir"

убедитесь, что все экземпляры chrome закрыты, прежде чем использовать флаг для открытия chrome. Вы получите предупреждение безопасности, которое указывает, что CORS включен.

Teejay · Accepted Answer · 2017-03-10 06:13:25

добавление в @Kirill Fuchs отличное решение и ответ на сомнение @StackUser - при запуске http-сервера установите путь только до папки приложения, а не до html-страницы! http-server C:\location\to\app и к index.html под app папку

Surendra Parchuru · Accepted Answer · 2017-12-17 21:06:49

У меня была та же проблема. после добавления кода ниже в мое приложение.js файл это исправлено.
var cors = require('cors')
app.use(cors());