Решение ошибки AngularJS: Cross-origin запросы
Быстрый ответ
Проблема: Ваш проект на AngularJS обнаружил проблему CORS.
Решение:
Для локальной разработки используйте http-server:
BashСкопировать кодnpm install -g http-server http-server -o
Для работы с внешними 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 на стадии разработки.
Полезные материалы
- Cross-Origin Resource Sharing (CORS) – HTTP | MDN — основы CORS.
- AngularJS — руководство для запуска AngularJS без сервера.
- Express cors middleware — настройка CORS в Express-приложениях.
- Cross-Origin Resource Sharing (CORS) | Articles | web.dev — детальное руководство по CORS от web.dev.
- AngularJS — уроки по использованию сервиса $http в AngularJS.