CORS грешка у прегледачу: узроци и решења за девелопере

Како се проблем препознаје

• У конзоли прегледача пише: "Access то фетцх ат ... хас been блоцкед by CORS policy"
• API позив ради у Постман-у или цурл-у, али не у прегледачу
• Мрежни захтев има статус 0 или (фаилед) у картици Network
• Појављује се само на локалном развојном серверу, не у продукцији
• Грешка се јавља након додавања новог домена или poddomena

Најчешћи узроци

Решење корак по корак

1. 1

   Проверите тачан оригин у прегледачу

   Отворите DevTools (Ф12) и у конзоли укуцајте location.origin. Запишите тачну вредност, на пример http://localhost:3000. У картици Network пронађите неуспешан захтев и погледајте заглавља захтева и одговора. Обратите пажњу на Origin у захтеву и Access-Control-Allow-Origin у одговору.

2. 2

   Подесите CORS на серверу

   На бацкенд-у експлицитно дозволите оригин фронтенд-а. У Node.js/Express: app.use(cors({ origin: 'http://localhost:3000', credentials: true })). У Спринг Boot: @CrossOrigin(origins = "http://localhost:3000") или глобална конфигурација. У АСП.НЕТ Core: builder.Services.AddCors(...) и app.UseCors(...). Увек наводите тачан оригин, не *, ако користите креденцијале.

3. 3

   Обрадите OPTIONS префлигхт

   Проверите да ли server враћа 204 или 200 на OPTIONS захтев са заглављима Access-Control-Allow-Methods и Access-Control-Allow-Headers. У Express-u то ради cors middleware аутоматски. У Nginx-u додајте add_header Access-Control-Allow-Origin ... и if ($request_method = OPTIONS) { return 204; }.

4. 4

   Користите proxy током локалног развоја

   Ако не можете да мењате server, подесите proxy у развојном алату. У Вите: server.proxy у vite.config.js. У Цреате React App: proxy поље у package.json. Затим позивајте API на релативној путањи (/api/...) уместо пуног URL-а.

5. 5

   Избегавајте CORS у продукцији

   Најбоље решење је да фронтенд и API буду на истом оригин-у (исти домен и порт). Ако нису, користите реверсе proxy који прослеђује /api на бацкенд. Тако прегледач не шаље cross-origin захтев.

6. 6

   Проверите proxy и хостинг конфигурацију

   Ако користите Nginx, Apache или цлоуд хостинг, уверите се да не уклањају CORS заглавља. У Nginx-u користите proxy_pass и add_header на правом нивоу. На serverless платформама (Vercel, Netlify) подесите CORS у заглављима одговора функција или у одговарајућој конфигурацији.

7. 7

   Тестирајте са цурл-ом

   Симулирајте префлигхт: curl -i -X OPTIONS http://localhost:8080/api/podaci -H "Origin: http://localhost:3000" -H "Access-Control-Request-Method: GET". Проверите да ли одговор садржи Access-Control-Allow-Origin и Access-Control-Allow-Methods. Ако не садржи, проблем је на серверу.

8. 8

   Очистите кеш и поново учитајте

   Прегледачи могу да кеширају префлигхт одговоре према заглављу Access-Control-Max-Age. Сачекајте да истекне, рестартујте прегледач или привремено смањите ту вредност на серверу. У DevTools укључите "Дисабле cache" и освежите страницу. Понекад је потребно рестартовати развојни server да bi се примениле измене конфигурације.

Ако ништа не помогне: напредне провере

Како да спречите да се понови

• Дефинишите листу дозвољених оригин-а у конфигурацији сервера и ажурирајте је при свакој промени домена.
• Користите исти оригин за фронтенд и API где год је могуће, или реверсе proxy.
• Тестирајте CORS понашање аутоматским тестовима или цурл-ом пре објављивања.
• Избегавајте `*` за `Access-Control-Allow-Origin` када користите креденцијале.

Честа питања