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

У меня есть три файла очень простого приложения 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>

продукт-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"
              }
  ];

})();

Я начал получать эту ошибку, как только я вошел в include product-color.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'.

Что может быть не так? Это проблема пути для product-color.html?

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

Ответ 1

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

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

Ответ 2

ОЧЕНЬ ПРОСТОТА FIX

  • Перейдите в каталог приложений
  • Запустите SimpleHTTPServer


В терминале

$ cd yourAngularApp
~/yourAngularApp $ python -m SimpleHTTPServer

Теперь перейдите в localhost: 8000 в свой браузер, и страница покажет

Ответ 3

Операция не допускается в хроме. Вы можете использовать HTTP-сервер (Tomcat) или использовать Firefox вместо этого.

Ответ 4

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

Ответ 5

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

Таким образом, вы можете включить разметку внутри тегов script в свой файл index.html и не включать в себя разметку как часть фактической директивы.

Добавьте это в свой index.html

<script type='text/ng-template' id='tpl-productColour'>
 <div class="list-group-item">
    <h3>Hello <em class="pull-right">Brother</em></h3>
</div>
</script>

Затем в вашей директиве:

app.directive('productColor', function() {
      return {
          restrict: 'E', //Element Directive
          //template: 'tpl-productColour'
          templateUrl: 'tpl-productColour'
      };
   }
  );

Ответ 6

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

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

Ответ 7

RootCause:

Файловый протокол не поддерживает перекрестный запрос источника для Chrome

Решение 1:

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

Сюжет 2:

Добавить --allow-file-access-from-files после ярлыка Chrome и откройте новый экземпляр просмотра, используя ярлык

enter image description here

Решение 3:

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

Ответ 8

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

Ответ 9

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

Ответ 10

  • Установите http-сервер, выполнив команду npm install http-server -g
  • Откройте терминал в пути, где находится index.html
  • Команда запуска http-server . -o
  • Наслаждайтесь этим!

Ответ 11

Причина

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

Решение

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

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

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

Ответ 12

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

Ответ 13

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

Ответ 14

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

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

Ответ 15

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

Ответ 16

Перейдите к C: /user/project/index.html, откройте его с помощью Visual Studio 2017, Файл> Показать в браузере или нажмите Ctrl + Shift + W

Ответ 17

У меня была такая же проблема. после добавления ниже кода в файл app.js он исправлен.

var cors = require('cors')
app.use(cors());