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


130

У меня есть три файла очень простого приложения 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 of 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
Просто быстрый указатель на то, что если вы сделаете что-то глупое, например, в моем случае я случайно добавил TLD к порту: « localhost: 8070.com », вы получите ту же ошибку. Проверьте, какой URL вы пытаетесь разрешить!
Wildhoney

Может быть, здесь похоже: stackoverflow.com/questions/10752055/…
Ngô ôc Tuấn

Ответы:


306

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

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


6
Отличное решение!
Хорхе

3
Http-сервер - это самый простой способ локального хостинга, который я видел. Примечание. Если у вас нет npm в Windows, просто установите node.js, и он станет доступен в cmd.
Octane

3
И если это произошло в веб-просмотре на Android, что мне делать !?
Доктор Джеки

2
Из любопытства, почему нельзя просто открыть файлы в веб-браузере?
tobiak777

3
@reddy Просто и понятно: доступ браузера к файловой системе непосредственно на вашем компьютере является проблемой безопасности.
Alex J

49

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

  1. Перейдите в каталог вашего приложения
  2. Запустить SimpleHTTPServer


В терминале

$ cd yourAngularApp
~/yourAngularApp $ python -m SimpleHTTPServer

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


8
В Python 3 так и должно быть python -m http.server.
Луан Нико

1
Это очень помогло! Отличное решение.
мирта

42

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


4
Вместо этого я использовал firefox в своей ситуации, и он работает. У Chrome больше безопасности, чем у Firefox? Почему мне разрешено это делать ....
thatOneGuy

Для меня это лучший ответ.
Томас

1
Коротко и просто ... Сработало!
viks

мне тоже очень помогло.
Рам Датт Шукла

1
Эй ... большое спасибо ... ваш ответ был такой большой помощью ... сэкономил так много моего времени
Megha

31

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


13

Если вы используете это в браузере 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

Это позволит вам загрузить файл в хром или хром. Если вам нужно выполнить ту же операцию для Windows, вы можете добавить этот переключатель в свойствах ярлыка Chrome или запустить его изcmd с флагом. По умолчанию эта операция запрещена в Chrome, Opera, Internet Explorer. По умолчанию работает только в firefox и safari. Следовательно, использование этой команды поможет вам.

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


12

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

Таким образом, вы можете включить разметку внутри тегов сценария в файл 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'
      };
   }
  );

Поскольку я уже редактировал этот пост, используйте templateUrl: 'tpl-productColor'
HANU

5

Основная причина:

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

Решение 1:

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

Вариант 2:

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

введите описание изображения здесь

Решение 3:

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


Использование Firefox помогли мне
Вайнит Subbaraya

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

4

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


2

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


Спасибо, чувак, два часа искали решение той же проблемы, и вот что…
Санти Нуньес

Добро пожаловать, братан. Счастливого кодирования :)
Эдисон Д'суза

1

Причина

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

Решение

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

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

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


1

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



0

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

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


0

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


0

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


-1

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

var cors = require('cors')
app.use(cors());
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.