Kratak odgovor
CORS greška nastaje kada pregledač blokira zahtev ka drugom domenu jer server nije poslao odgovarajuće `Access-Control-Allow-Origin` zaglavlje. Rešenje je na serveru: dodajte dozvoljeni origin, metode i zaglavlja, ili koristite proxy tokom razvoja. Ne pokušavajte da je zaobiđete na frontend-u.
Kako se problem prepoznaje
- U konzoli pregledača piše: "Access to fetch at ... has been blocked by CORS policy"
- API poziv radi u Postman-u ili curl-u, ali ne u pregledaču
- Mrežni zahtev ima status 0 ili (failed) u kartici Network
- Pojavljuje se samo na lokalnom razvojnom serveru, ne u produkciji
- Greška se javlja nakon dodavanja novog domena ili poddomena
Najčešći uzroci
Nedostaje Access-Control-Allow-Origin
Server ne šalje zaglavlje `Access-Control-Allow-Origin` ili šalje vrednost koja se ne poklapa sa origin-om stranice. Pregledač tada blokira čitanje odgovora.
Pogrešan origin ili wildcard sa kredencijalima
Ako koristite `credentials: 'include'`, server ne sme da vrati `*` već tačan origin. Takođe, `http://localhost:3000` i `http://127.0.0.1:3000` su različiti origin-i.
Preflight zahtev nije obrađen
Za nestandardne metode ili zaglavlja pregledač prvo šalje OPTIONS zahtev. Ako server ne odgovori na OPTIONS sa odgovarajućim zaglavljima, glavni zahtev se ne šalje.
Proxy ili hosting ne prosleđuje zaglavlja
Reverse proxy (Nginx, Apache) ili serverless platforma mogu ukloniti CORS zaglavlja ili vratiti sopstvenu stranicu greške. Proverite konfiguraciju proxy-ja.
Pogrešan URL API-ja
Ako frontend poziva pogrešan domen, poddomen ili port, server možda ne dozvoljava taj origin. Proverite tačan URL u kodu i listu dozvoljenih origin-a na serveru.
Rešenje korak po korak
- 1
Proverite tačan origin u pregledaču
Otvorite DevTools (F12) i u konzoli ukucajte
location.origin. Zapišite tačnu vrednost, na primerhttp://localhost:3000. U kartici Network pronađite neuspešan zahtev i pogledajte zaglavlja zahteva i odgovora. Obratite pažnju naOriginu zahtevu iAccess-Control-Allow-Originu odgovoru. - 2
Podesite CORS na serveru
Na backend-u eksplicitno dozvolite origin frontend-a. U Node.js/Express:
app.use(cors({ origin: 'http://localhost:3000', credentials: true })). U Spring Boot:@CrossOrigin(origins = "http://localhost:3000")ili globalna konfiguracija. U ASP.NET Core:builder.Services.AddCors(...)iapp.UseCors(...). Uvek navodite tačan origin, ne*, ako koristite kredencijale. - 3
Obradite OPTIONS preflight
Proverite da li server vraća 204 ili 200 na OPTIONS zahtev sa zaglavljima
Access-Control-Allow-MethodsiAccess-Control-Allow-Headers. U Express-u to radicorsmiddleware automatski. U Nginx-u dodajteadd_header Access-Control-Allow-Origin ...iif ($request_method = OPTIONS) { return 204; }. - 4
Koristite proxy tokom lokalnog razvoja
Ako ne možete da menjate server, podesite proxy u razvojnom alatu. U Vite:
server.proxyuvite.config.js. U Create React App:proxypolje upackage.json. Zatim pozivajte API na relativnoj putanji (/api/...) umesto punog URL-a. - 5
Izbegavajte CORS u produkciji
Najbolje rešenje je da frontend i API budu na istom origin-u (isti domen i port). Ako nisu, koristite reverse proxy koji prosleđuje
/apina backend. Tako pregledač ne šalje cross-origin zahtev. - 6
Proverite proxy i hosting konfiguraciju
Ako koristite Nginx, Apache ili cloud hosting, uverite se da ne uklanjaju CORS zaglavlja. U Nginx-u koristite
proxy_passiadd_headerna pravom nivou. Na serverless platformama (Vercel, Netlify) podesite CORS u zaglavljima odgovora funkcija ili u odgovarajućoj konfiguraciji. - 7
Testirajte sa curl-om
Simulirajte preflight:
curl -i -X OPTIONS http://localhost:8080/api/podaci -H "Origin: http://localhost:3000" -H "Access-Control-Request-Method: GET". Proverite da li odgovor sadržiAccess-Control-Allow-OriginiAccess-Control-Allow-Methods. Ako ne sadrži, problem je na serveru. - 8
Očistite keš i ponovo učitajte
Pregledači mogu da keširaju preflight odgovore prema zaglavlju
Access-Control-Max-Age. Sačekajte da istekne, restartujte pregledač ili privremeno smanjite tu vrednost na serveru. U DevTools uključite "Disable cache" i osvežite stranicu. Ponekad je potrebno restartovati razvojni server da bi se primenile izmene konfiguracije.
Ako ništa ne pomogne: napredne provere
Proverite da li server vraća CORS zaglavlja samo za uspešne odgovore. Ako aplikacija baci grešku 500, CORS zaglavlja možda izostanu, pa pregledač prijavi CORS umesto prave greške. U tom slučaju prvo popravite serversku grešku. Zatim, koristite alat kao što je curl ili Postman da vidite sirov odgovor. Obratite pažnju na redirect-e: ako server preusmerava http na https, CORS zaglavlja se mogu izgubiti. Na kraju, proverite da li imate više slojeva (CDN, load balancer, proxy) i da li neki od njih briše zaglavlja. U produkciji nikada ne koristite Access-Control-Allow-Origin: * ako aplikacija koristi kolačiće ili autorizacione zaglavlja.
Kako da sprečite da se ponovi
- Definišite listu dozvoljenih origin-a u konfiguraciji servera i ažurirajte je pri svakoj promeni domena.
- Koristite isti origin za frontend i API gde god je moguće, ili reverse proxy.
- Testirajte CORS ponašanje automatskim testovima ili curl-om pre objavljivanja.
- Izbegavajte `*` za `Access-Control-Allow-Origin` kada koristite kredencijale.
Kada je bolje pozvati stručnjaka
Ako ste isprobali sve korake i CORS greška i dalje blokira aplikaciju, ili ako nemate pristup serverskoj konfiguraciji, obratite se IT podršci ili DevOps timu. Oni mogu da provere proxy, hosting i bezbednosna pravila.
Razvoj softvera i proizvoda · Aplikacije po meri, SaaS i MVP za 4 do 8 nedeljaČesta pitanja
Zašto CORS greška ne postoji u Postman-u?
Postman i curl ne primenjuju CORS pravila jer nisu pregledači. CORS je bezbednosna mera pregledača, pa se greška javlja samo u pregledaču. To potvrđuje da je problem u zaglavljima servera, a ne u mreži.
Mogu li da rešim CORS na frontend-u?
Ne možete trajno rešiti CORS na frontend-u jer pregledač blokira čitanje odgovora, ili sam zahtev kod preflight-a, pre nego što podaci stignu do vašeg JavaScript koda. Jedino rešenje je da server pošalje ispravna zaglavlja ili da koristite proxy.
Šta znači greška "Credential is not supported if the CORS header is wildcard"?
To znači da šaljete kredencijale (na primer kolačiće) dok server vraća `Access-Control-Allow-Origin: *`. Pregledač to ne dozvoljava. Server mora da vrati tačan origin i `Access-Control-Allow-Credentials: true`.