Помилка CORS: blocked by CORS policy

Коротко: Браузер блокує відповідь із чужого джерела, бо сервер явно не дозволив цій сторінці доступ до неї.

Докладніше: Повідомлення в консолі: Access to fetch at 'https://api.example.com' from origin 'https://my-site.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Це захист браузера, а не сервера: запит дійшов, але сторінка не може прочитати відповідь.

Подробиці

Навіщо це потрібно

Політика одного джерела (same-origin policy) не дає сторінці (джерело A) читати дані джерела B. Джерело складається з протоколу, хоста й порту. CORS дозволяє серверу B надавати обраним джерелам доступ через заголовки. Для «непростих» запитів (JSON з Authorization, PUT/DELETE) браузер спершу надсилає попередній запит (preflight) (OPTIONS).

Типові причини

• Сервер не надсилає Access-Control-Allow-Origin.
• Джерело не збігається (http і https, www і без, інший порт, друкарська помилка).
• Preflight (OPTIONS) не обробляється або повертає 404/401.
• Access-Control-Allow-Headers чи -Methods не містять надісланого.
• За cookie/облікових даних Access-Control-Allow-Origin не повинен бути *, а потрібно задати Access-Control-Allow-Credentials: true.
• Сторінка помилки (500/502) не містить заголовків CORS і маскується під помилку CORS.

Рішення

1. На сервері задайте дозволене джерело: Access-Control-Allow-Origin: https://my-site.com і за потреби -Methods, -Headers, -Max-Age. (Express: пакет cors; Next.js: заголовки в обробниках маршрутів/next.config.)
2. Відповідайте на preflight OPTIONS кодом 204.
3. У розробці використовуйте проксі (Vite/Next rewrites), щоб браузер звертався лише до власного джерела.
4. Не використовуйте * разом із cookie; перевіряйте джерела за списком дозволених джерел і повертайте їх назад.
5. Подивіться вкладку «Мережа» (F12): яка відповідь і які заголовки справді повернулися?

Розширення браузера для CORS «розв’язують» лише вашу локальну проблему, а не проблему користувачів.

Див. також: CORS, HTTP-заголовки