Обход ошибки 'Access-Control-Allow-Origin' с fetch в JS

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

Для отправки сетевых запросов без ожидания ответа используйте fetch с параметром mode: 'no-cors':

// Выполняем запрос к example.com, ответ не ожидаем.
fetch('https://example.com', { mode: 'no-cors' });

Подходит для запросов в фоновом режиме, например, для отправки сигналов, но помните о ограничениях режима no-cors, если ответ на запрос необходим.

Понимание режима 'no-cors'

Использование fetch с mode: 'no-cors' может ввести в заблуждение, потому что, хотя режим позволяет избежать ошибок CORS, он не предоставляет доступа к содержимому ответа. Это значительно ограничивает применимость таких запросов.

Перегляд альтернатив

Использование CORS-прокси

Одним из вариантов является использование CORS-прокси, который добавляет в ответ нужный заголовок Access-Control-Allow-Origin. С применением Heroku и других платформ можно настроить проксирование запросов.

// Проксирование запроса через CORS-прокси.
fetch('https://your-proxy.com/https://example.com');

Решение на стороне сервера

Оптимально решать проблему CORS на стороне сервера — это обеспечит безопасность и надёжность. В Express.js используйте промежуточное ПО cors, а в Laravel настройте соответствующее middleware и маршруты.

Инструменты для локальной разработки

При разработке удобно использовать браузерные расширения, контролирующие CORS, однако они не подходят для продакшна.

Обратные прокси

«CORS Anywhere» или «Just CORS» — это обратные прокси-серверы, предоставляющие возможности для разработки без дополнительной настройки сервера.

Осмотр барьеров

Совпадение протоколов

Убедитесь, что протоколы в URL API-запроса соответствуют настройкам сервера, иначе возникнут проблемы с кросс-доменными запросами.

Осторожное использование обратных прокси

Обратные прокси решают проблемы с CORS, но могут создать угрозы безопасности и замедлить работу приложения.

Продуманное использование 'no-cors'

Этот режим подходит для Service Workers, для кеширования ресурсов и для аналитики, когда важен не ответ, а сам запрос.

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

Fetch: 🚀 (Исходящий запрос)
Mode: no-cors ✈️🚫 (Без CORS)

🚀🛫 — отправка без препятствий.
🏢🚧 — сервер видит запрос, но не принимает его.
🚨 — "Стоп! Нет разрешения, вход закрыт!"
🚀🔄 — запрос облетает сервер, но не может посадиться.

Это односторонний процесс — сигнал отправлен, но ответ не получен.

Практические решения для продакшна

Настройка CORS на сервере

На продакшен-сервере следует правильно настроить CORS, чтобы контролировать доступ к API.

Собственные решения CORS

Для точного контроля CORS рекомендуется разработка собственных решений, отвечающих вашим требованиям.

Внедрение в работу приложения

В Vue.js используйте fetch-запросы в хуке mounted, для Laravel изучите рекомендации Пита Хьюстона на Medium.

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

1. Использование Fetch API – MDN — подробное руководство по fetch.
2. Практика fetch на CSS-Tricks — легкое вводное удаление в Fetch API с примерами.
3. Fetch по версии JakeArchibald.com — особенности и ограничения Fetch API.
4. О Service Workers на web.dev — роль Service Workers в отправке запросов.
5. JavaScript Fetch API от DigitalOcean — учебник по реализации Fetch API.
6. Обсуждение fetch с no-cors на Stack Overflow — способы обхода ограничений CORS.
7. Fetch на JavaScript.info — глубокое проникновение в Fetch API и работу с промисами.