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

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"
              }
  ];

})();

я начал получать эту ошибку, как только я ввел включить цвет продукта.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/

121

angularjs html javascript xmlhttprequest

автор: Tejus Prasad

16 ответов

автор: Kirill Fuchs · Accepted Answer · 2016-04-01 14: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 04:31:15

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

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

В терминале

$ cd yourAngularApp
~/yourAngularApp $ python -m SimpleHTTPServer

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

автор: daniel · Accepted Answer · 2015-04-21 07:05:02

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

автор: Ali Sepehri.Kh · Accepted Answer · 2015-11-03 20:28:26

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

автор: Tejus Prasad · Accepted Answer · 2015-05-12 12: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 07:33:43

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

автор: Timothy.Li · Accepted Answer · 2017-08-11 05:35:49

RootCause:

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

Решение 1:

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

Sotution 2:

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

решение 3:

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

автор: bullettrain · Accepted Answer · 2015-02-14 15:26:36

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

автор: Edison D'souza · Accepted Answer · 2016-11-15 13:03:20

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

автор: Virendra Shenvi Velingkar · Accepted Answer · 2015-04-24 05:04:40

Причина

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

Решение

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

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

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

автор: Shantha Moorthy K · Accepted Answer · 2015-11-20 06:10:11

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

автор: gaurav moolani · Accepted Answer · 2016-10-02 09:21:31

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

автор: Michael Horta Fleitas · Accepted Answer · 2017-12-15 14:36:03

установите http-сервер, запустив команду npm install http-server -g
откройте терминал в пути, где находится индекс.HTML-код
выполнить команду http-server . -o
наслаждайтесь!

автор: Manas · Accepted Answer · 2016-11-02 18:40:44

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

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

автор: Teejay · Accepted Answer · 2017-03-10 04:13:25

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

автор: Surendra Parchuru · Accepted Answer · 2017-12-17 19:06:49

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

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