CORS-ошибка в проекте, написанном с ИИ

Сообщение Access to fetch at '...' from origin '...' has been blocked by CORS policy — одна из самых частых жалоб после того, как проект с ИИ выкладывают на хостинг. ИИ обычно предлагает поставить расширение для браузера, добавить mode: 'no-cors' во фронтенд или разрешить всё звёздочкой. Первое работает только у вас, второе делает ответ нечитаемым, третье иногда открывает дыру.

Почему так происходит

Браузер разрешает странице на site.kz читать ответы с api.site.kz или чужого домена, только если сервер явно это разрешил заголовком Access-Control-Allow-Origin. Для запросов с JSON, токенами или методами кроме GET и POST браузер сначала шлёт «разведочный» запрос OPTIONS (preflight), и сервер должен ответить на него правильно.

Типичные причины в вайб-код проектах:

• В dev-режиме Vite или Next.js проксировал запросы, на проде прокси нет.
• Edge-функция Supabase не обрабатывает OPTIONS и не возвращает CORS-заголовки, особенно в ответах с ошибкой.
• Разрешён https://site.kz, а пользователь пришёл на https://www.site.kz.
• Фронтенд напрямую вызывает OpenAI или другой API, который не рассчитан на вызовы из браузера.
• Сервер упал с ошибкой 500 без заголовков, и браузер показывает это как CORS.

Что проверить самому

1. Откройте DevTools → Network, найдите красный запрос и посмотрите, был ли перед ним OPTIONS и какой у него статус.
2. Проверьте, совпадает ли origin в ошибке с тем, что разрешено на сервере, включая www и https.
3. Посмотрите логи бэкенда: возможно, это не CORS, а падение сервера.
4. Проверьте, нет ли запросов с https-страницы на http-адрес — это mixed content, а не CORS.
5. Если запрос идёт к чужому API с ключом — его нужно перенести на сервер в любом случае.

Пример настройки в Express:

import cors from 'cors';
app.use(cors({ origin: ['https://site.kz', 'https://www.site.kz'], credentials: true }));

Когда звать разработчика. Если вы видите, что ошибка возникает на вашем собственном API и вы можете поменять его код, настройка CORS займёт пару строк. Сложнее, когда запросы идут к edge-функциям, чужим сервисам или через несколько доменов, когда вход работает через куки или когда ошибка «плавает» и появляется только иногда. Тогда CORS часто маскирует другую проблему: падение сервера, неправильный адрес API или вызов платного сервиса из браузера. Не стоит ставить звёздочку «чтобы заработало» — лучше разобраться один раз.

Как чиним мы

Находим, какой именно сервер отвечает без разрешения, и настраиваем CORS там: явный список доменов для каждого окружения, корректный ответ на preflight, заголовки и в успешных ответах, и в ошибках. Если фронтенд обращается к внешним API напрямую, делаем серверный прокси, убираем ключи из браузера и добавляем ограничение частоты запросов. Часто удобнее разместить фронтенд и API на одном домене через nginx — тогда CORS не нужен вовсе. Подробнее — на странице «Аптечка вайб-кода».

Сколько стоит

Минимальная стоимость «Аптечки» — от 80 000 ₸: диагностика за 50 000 ₸ плюс исправление. Если причина в архитектуре и нужно выносить вызовы API на сервер, это считается как исправление ошибок или доработка. Точнее — в калькуляторе. Чтобы такие проблемы не всплывали после каждой выкладки, держите одинаковое окружение локально и на сервере — подробности в статье «Почему вайб-код ломается».