Решение ошибки AngularJS: Cross-origin запросы

Быстрый ответ

Проблема: Ваш проект на AngularJS обнаружил проблему CORS.

Решение:

1. Для локальной разработки используйте http-server:

   Bash

   Скопировать код

   npm install -g http-server
   http-server -o

   Запустить код

2. Для работы с внешними API, установите заголовок Access-Control-Allow-Origin со значением '*'.

Важно: Не забывайте о веб-безопасности. Этот метод подойдёт для разработки, но в производственной среде его использование нежелательно.

Запускаете AngularJS на своем ПК? Давайте обсудим серверы

Если вы пытаетесь запустить AngularJS-приложение прямо с file:// URL, то вас ждут ограничения CORS. Настало время развернуть локальный сервер, что создаст условия, максимально приближенные к работе в реальной среде.

Работаем с http-server

Запустим http-server на Node.js и приступим к разработке на высоком уровне:

npm install -g http-server // Установим глобально, почему бы и нет?
http-server -o // Запускаем и вперёд, к работе!

Теперь через localhost вы в безопасной зоне CORS.

Node.js не для вас? Нет проблем!

Если Node.js не по вкусу, воспользуйтесь Python и его SimpleHTTPServer:

python -m SimpleHTTPServer // Запускайте и наслаждайтесь простотой.

Пользователям WebStorm и Visual Studio Code доступны удобные в использовании встроенные серверы для эффективной разработки.

Подробнее об этом расскажет наш спикер на видео

Внимание, поклонники Chrome!

Запуск Chrome с параметром --disable-web-security — быстрый, но рискованный метод. Рассматривайте это как крайнюю меру.

Время деплоя? Прощайте, CORS!

Проблемы CORS автоматически исчезают при переносе приложения на сервер (Apache, Nginx и т.д.). Серверы используют протоколы http/https, которые обходят эти ограничения.

Пути: Детали играют большую роль

Всегда обращайте внимание на пути к файлам, чтобы избежать ошибок.

Обязательно используйте префиксы http:// или https:// в URL приложений AngularJS, чтобы избежать неприятностей.

Временное решение — браузер Firefox!

Firefox может быть более либеральным к запросам файлов, но помните, что это всего лишь временное решение, а не устранение проблемы с корнем.

Визуализация

Кросс-доменные запросы в AngularJS можно представить как попытку отправить письмо:

Конверт:             | Интернет-протоколы  |
---------------------|---------------------
Принятые письма:     | ✉️ http, ✉️ data   |
                     | ✉️ chrome-ext., ✉️ https |
Отклонённые письма:  | 🚫 file и другие    |

Отправка письма (📤): [Ваш запрос AngularJS]

Результат:             
📤 ➡️ ✉️ http/https/data/chrome-extension (📬) // Ваш запрос принят.
📤 ➡️ 🚫 file и другие (🔥) // Ваш запрос отклонён.

Запросы AngularJS требуют корректного протокола, как и письмо требует правильной марки.

Обходим препятствия

Настройка директив

Если в директивах AngularJS используются шаблоны, убедитесь в корректности указанных путей, чтобы избежать ошибок.

<my-directive ng-include="'/partials/my-template.html'"></my-directive> // Шаблон правильно подключён

Плохой выбор: 'file://'

Интернет — это не локальная файловая система. Для тестирования и разработки предпочитайте http/https.

Браузеры и CORS

Браузеры обеспечивают безопасность пользователей. Локальный сервер станет вашим союзником, помогая решить проблемы с CORS на стадии разработки.

Полезные материалы

1. Cross-Origin Resource Sharing (CORS) – HTTP | MDN — основы CORS.
2. AngularJS — руководство для запуска AngularJS без сервера.
3. Express cors middleware — настройка CORS в Express-приложениях.
4. Cross-Origin Resource Sharing (CORS) | Articles | web.dev — детальное руководство по CORS от web.dev.
5. AngularJS — уроки по использованию сервиса $http в AngularJS.