Kako popraviti greške 404 posle objavljivanja sajta ili aplikacije

Ako vaša aplikacija radi lokalno, ali stranice vraćaju 404 posle objave, najčešći uzrok je nedostatak SPA (single-page app) rutiranja: server traži fajl pod imenom /dashboard koji ne postoji, jer ta ruta postoji samo u JavaScript-u. Popravka je pravilo za rezervu koje servira index.html za rute aplikacije. Drugi uzroci su fajlovi koji nedostaju u build izlazu, putanje osetljive na velika slova, razlike u kosoj crti na kraju, pogrešna osnovna putanja i API rute koje nikada nisu objavljene.

Počnite tako što ćete zapisati tačno koji URL daje 404 i kako ste do njega došli. Obrazac odmah ukazuje na uzrok.

Korak 1: Pronađite obrazac

Da biste videli stvarni statusni kod, otvorite alate za programere (desni klik → Inspect), idite na karticu Network, osvežite stranicu i pogledajte status prvog zahteva.

Korak 2: Dodajte SPA fallback

Ovo je klasičan slučaj. U React, Vue ili Svelte aplikaciji sa jednom stranicom server ima samo nekoliko pravih fajlova: index.html i neki JavaScript i CSS. Rute kao /dashboard ili /projects/42 obrađuje ruter u pregledaču.

• Klik na link radi: ruter menja URL i crta novu stranicu bez pitanja servera.
• Osvežavanje ili direktno otvaranje linka ne radi: pregledač traži od servera /dashboard, server nema takav fajl i vraća 404.

Popravka je pravilo koje kaže: ako zahtev ne odgovara pravom fajlu, servirajte index.html sa statusom 200 i prepustite kontrolu ruteru. Kako se to dodaje zavisi od hosta (proverite aktuelnu dokumentaciju hosta, jer se detalji menjaju):

Pazite da pravilo ne proguta prave fajlove: zahtevi za /assets/app.js moraju i dalje da vraćaju JavaScript fajl. Ako umesto toga vraćaju index.html, dobijate praznu stranicu sa greškom „Failed to load module script“. Pogledajte kako popraviti praznu belu stranicu.

Dajte i ruteru catch-all rutu, kako bi URL-ovi koji se ne poklapaju ni sa jednom stranicom prikazali prijateljsku poruku „Stranica nije pronađena“ umesto ničega.

Ako ne možete da menjate podešavanja servera, hash rutiranje (URL-ovi poput /#/dashboard) zaobilazi problem, jer deo posle # nikada ne ide na server. To je zaobilazno rešenje, a ne prvi izbor: URL-ovi su ružniji i manje prijateljski za pretraživače.

Frameworki koji prikazuju stranice na serveru ili ih generišu u vreme builda (Next.js, Astro i slični) obično imaju prave fajlove ili serverske rute za svaku stranicu, pa je ovaj problem ređi tamo. Njihov ekvivalent je stranica koja nikada nije generisana u vreme builda.

Korak 3: Proverite šta je zaista objavljeno

Ako se sve daje 404, server verovatno ne servira vašu izgrađenu aplikaciju.

• Pravi folder. Host mora da servira build izlaz (obično dist za Vite, build za Create React App, out za statički Next.js export), a ne koren projekta.
• Build je prošao. Pročitajte log objave. Ako build nije uspeo, host je možda objavio ništa ili stariju verziju.
• index.html je na vrhu objavljenog foldera, a ne u podfolderu.
• Osnovna putanja se poklapa. Ako se aplikacija servira sa example.com/app/, mora biti izgrađena sa tom osnovom (Vite-ov base, basename kod React Router-a), inače svaka ruta i resurs promašuju.

Korak 4: Popravite fajlove koji nedostaju i pogrešne putanje

Kada se stranice učitavaju, ali resursi daju 404:

• Osetljivost na velika slova. macOS i Windows obično tretiraju Logo.png i logo.png kao isti fajl. Većina Linux servera ne. Neka se svaka referenca poklapa sa pravim imenom fajla.
• Fajlovi van builda. U Vite-u se fajlovi u public/ kopiraju kakvi jesu i referenciraju iz korena (/logo.png). Fajlovi uvezeni u kodu se pakuju u bundle. Fajl koji stoji negde drugde u projektu možda uopšte nije objavljen.
• Relativne putanje. images/photo.jpg se razrešava u odnosu na trenutni URL, pa se pokvari na /blog/post-1. Koristite /images/photo.jpg.
• Otpremljeni fajlovi snimljeni na lokalni disk. Ako su korisnički fajlovi snimljeni u folder samog servera, nestaju kada se objavi nova verzija. Koristite pravo skladište fajlova.

Korak 5: Dosledno rukujte kosim crtama na kraju

/about i /about/ su različiti URL-ovi. Hostovi se razlikuju po tome da li dodaju ili uklanjaju kosu crtu, a neslaganje sa linkovima ili ruterom može izazvati 404 ili petlju preusmeravanja. Izaberite jedan stil, neka vaši linkovi koriste taj stil i podesite host da preusmerava drugi oblik na njega. Dosledno je korisno i za pretraživače, koji inače mogu da vide dve kopije svake stranice.

Korak 6: Popravite API rute koje daju 404

Ako se stranica učitava, ali u kartici Network zahtevi /api/... daju 404:

• Backend nije postavljen. Statički host servira samo fajlove; backend mora negde da radi.
• Putanja je drugačije rutirana u produkciji. U razvoju je proxy možda prosleđivao /api na poseban server. U produkciji host treba ekvivalentan rewrite, ili frontend mora da zove stvarnu adresu API-ja.
• SPA fallback je uhvatio zahtev. Ako API zahtev vraća index.html sa statusom 200, pravilo za rezervu je preširoko. Isključite /api/* iz njega.

Objavljena aplikacija šalje zahteve na /api/orders i dobija 404, a u pregledu radi. Proverite kako je /api rutiran u pregledu, a kako u objavljenoj aplikaciji, i učinite da objavljeni frontend dolazi do backend-a na isti način.

Korak 7: Preusmerite stare URL-ove

Ako ste prešli sa drugog sajta ili ste restrukturirali sajt, stari URL-ovi koje ljudi i pretraživači i dalje koriste daće 404. Dodajte 301 (trajno) preusmeravanje sa svakog starog URL-a na njegov novi dom. Vodite spisak i testirajte uzorak posle lansiranja. Naš vodič o migraciji WordPress sajta pokriva izradu tog spiska.

Korak 8: Proverite domen

Ako aplikacija radi na adresi hosta, ali daje 404 na vašem prilagođenom domenu, domen možda pokazuje na pogrešan projekat, ili host još nije povezao domen sa vašim sajtom. Proverite DNS zapise i podešavanja domena kod hosta. Pogledajte kako povezati prilagođeni domen.

Napravite svoju pravu 404 stranicu korisnom

Neki 404-ovi su ispravni: neko je pogrešno ukucao URL. Neka ta stranica bude korisna:

• Kratka poruka i link ka početnoj stranici i ključnim sekcijama
• Polje za pretragu, ako sajt ima pretragu
• Isti header i navigacija kao ostatak sajta

Tamo gde to podešavanje dozvoljava, vratite pravi statusni kod 404 za stranice koje ne postoje. Poruka „nije pronađeno“ vraćena sa statusom 200 je ono što pretraživači zovu meki 404, i može da potroši njihovo vreme za indeksiranje i zbuni indeksiranje.

Česte greške

• Testiranje samo klikom. Uvek testirajte tako što ćete duboke URL-ove nalepiti u novi tab i osvežiti.
• Fallback koji hvata sve. Resursi i API rute vraćaju index.html, što izaziva prazne stranice i zbunjujuće API greške.
• Neslaganje velikih i malih slova koje puca samo na serveru.
• Objavljivanje izvornog foldera umesto build izlaza.
• Restrukturiranje URL-ova bez preusmeravanja. Svaki stari link postaje 404.

404 u Mythex-u

U Mythex-u objavljujete iz radnog prostora, a statički frontendi se postavljaju kao statički sajtovi. Ako objavljena stranica daje 404, dajte agentu tačan URL, recite da li se dešava pri osvežavanju ili pri kliku i šta pokazuje kartica Network, pa ga zamolite da proveri rutiranje. Objavite ponovo posle popravke, jer je živa aplikacija snimak sve dok je ne objavite ponovo. Ako ste nedavno menjali projekat, a živi sajt izgleda staro, objavite ponovo i osvežite uz zaobilaženje keša. Koristite Popravi uz AI u dijalogu za objavu ako build ne uspe. Pogledajte Kako objaviti i Rešavanje problema pri objavi u dokumentaciji, i naš vodič o otklanjanju grešaka u aplikaciji napravljenoj uz AI.

Kontrolna lista za 404

• Zabeleženo tačno koji URL-ovi daju 404 i da li pri kliku, osvežavanju ili oba
• SPA fallback servira index.html za rute aplikacije, sa statusom 200
• Fallback isključuje prave fajlove i /api/*
• Ruter ima catch-all rutu „nije pronađeno“
• Folder build izlaza je ono što se objavljuje, i build je uspeo
• Osnovna putanja se poklapa sa mestom na kojem se aplikacija servira
• Velika i mala slova u imenima fajlova se poklapaju sa svakom referencom
• Putanje resursa počinju sa /
• Stil kosih crti na kraju je dosledan
• API rute su postavljene i rutirane u produkciji
• 301 preusmeravanja za stare URL-ove
• Duboki linkovi testirani nalepljivanjem u novi tab

Pitanja