Помилка AngularJS: Запити перехресного походження підтримуються лише для протокольних схем: http, даних, chrome-extension, https


130

У мене є три файли дуже простого кутового додатку 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>

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

})();

Я почав отримувати цю помилку, як тільки ввійшов включати 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-документи безпосередньо з браузера. Щоб виправити це, вам потрібно буде подати свій код із веб-сервера та отримати доступ до нього на localhost. Якщо у вас встановлена ​​програма 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.
Октан

3
А якщо це трапилось у веб-перегляді в android, що мені робити !?
Dr.jacky

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
Короткий і простий ... Працював!
викс

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

1
Гей ... дякую ... Ваша відповідь була такою великою допомогою ... врятувала стільки мого часу
Мега

31

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


13

Якщо ви використовуєте це в браузері хром / хром (наприклад: в 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, ви можете додати цей перемикач у властивості хромованого ярлика або запустити його cmdз прапором. Ця операція за замовчуванням заборонена в Chrome, Opera, Internet Explorer. За замовчуванням він працює лише у firefox та сафарі. Отже, використання цієї команди допоможе вам.

Ви також можете розмістити його на будь-якому веб-сервері (приклад: 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-сервер

Сотуція 2:

Додати - дозволити доступ до файлів після файлу ярлика Chrome, і відкрийте новий екземпляр перегляду за допомогою цього ярлика

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

Рішення 3:

використовувати натомість Firefox


Використання Firefox допомогло мені
Vineeth 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. Це може спричинити серйозні проблеми.


Спасибі людино, дві години шукали рішення тієї самої проблеми і було це ...
Санті Нуньєс

Ласкаво просимо, брате. Happy Coding :)
Edison D'souza

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

Ви повинні відкрити хром за допомогою наступного прапора. Перейдіть до запуску меню та введіть "хром - відключення-веб-безпека - користувач-дані-реж"

Переконайтеся, що всі екземпляри хрому закриті, перш ніж використовувати прапор для відкриття хрому. Ви отримаєте попередження про безпеку, яке вказує, що 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.