Ошибка 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/

javascript html angularjs xmlhttprequest user3422637
источник
1
Просто быстрый указатель на то, что если вы сделаете что-то глупое, например, в моем случае я случайно добавил TLD к порту: « localhost: 8070.com », вы получите ту же ошибку. Проверьте, какой URL вы пытаетесь разрешить!
Wildhoney
Может быть, здесь похоже: stackoverflow.com/questions/10752055/…
Ngô ôc Tuấn
Возможный дубликат «Запросы перекрестного происхождения поддерживаются только для HTTP». ошибка при загрузке локального файла

Ответы:

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'
      };
   }
  );
link64
источник
Поскольку я уже редактировал этот пост, используйте templateUrl: 'tpl-productColor'
HANU
5

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

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

Решение 1:

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

Вариант 2:

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

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

Решение 3:

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

Timothy.Li
источник
Использование 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.

Шанта Мурти К.
источник
1

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

Гарав Мулани
источник
Отличное решение
Мохамед Адель
0

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

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

Manas
источник
0

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

Tejaswini
источник
0

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

etoricky
источник
-1

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

var cors = require('cors')
app.use(cors());
Сурендра Парчуру
источник