Kako popraviti greške 404 nakon objavljivanja sajta ili aplikacije

Ako vaša aplikacija radi lokalno, ali stranice vraćaju 404 nakon objave, najčešći uzrok je nedostajuće SPA (single-page application) rutiranje: server traži datoteku pod nazivom /dashboard koja ne postoji, jer ta ruta postoji samo u JavaScriptu. Rješenje je pravilo za povratnu opciju koje servira index.html za rute aplikacije. Ostali uzroci su datoteke koje nedostaju u izlazu builda, putanje osjetljive na velika i mala slova, razlike u završnoj kosoj crti, pogrešna osnovna putanja i API rute koje nikada nisu objavljene.

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

Korak 1: Pronađite obrazac

Da vidite stvarni statusni kod, otvorite alate za developere (desni klik → Inspect), idite na karticu Network, osvježite stranicu i pogledajte status prvog zahtjeva.

Korak 2: Dodajte SPA povratnu opciju

Ovo je klasičan slučaj. U aplikaciji s jednom stranicom u Reactu, Vueu ili Svelteu, server ima samo nekoliko stvarnih datoteka: index.html i neke JavaScript i CSS datoteke. Rute poput /dashboard ili /projects/42 obrađuje ruter u pregledaču.

• Klik na link radi: ruter mijenja URL i iscrtava novu stranicu bez pitanja servera.
• Osvježavanje ili direktno otvaranje linka ne radi: pregledač traži od servera /dashboard, server nema takvu datoteku i vraća 404.

Rješenje je pravilo koje kaže: ako zahtjev ne odgovara stvarnoj datoteci, servirajte index.html sa statusom 200 i prepustite kontrolu ruteru. Kako to dodati zavisi od hosta (provjerite trenutnu dokumentaciju vašeg hosta, jer se detalji mijenjaju):

Pazite da pravilo ne proguta stvarne datoteke: zahtjevi za /assets/app.js moraju i dalje vraćati JavaScript datoteku. Ako umjesto toga vraćaju index.html, dobijate praznu stranicu sa greškom „Failed to load module script”. Pogledajte kako popraviti praznu bijelu stranicu.

Takođe dajte ruteru catch-all rutu da bi URL-ovi koji ne odgovaraju nijednoj stranici prikazali prijateljsku poruku „Stranica nije pronađena” umjesto ničega.

Ako ne možete mijenjati postavke servera, hash rutiranje (URL-ovi poput /#/dashboard) zaobilazi problem, jer dio nakon # nikada ne ide na server. To je zaobilazno rješenje, a ne prvi izbor: URL-ovi su ružniji i manje prijateljski za pretraživače.

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

Korak 3: Provjerite šta je zaista postavljeno

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

• Pravi folder. Host mora objaviti izlaz builda (najčešće dist za Vite, build za Create React App, out za statički Next.js export), a ne korijenski folder projekta.
• Build je prošao. Pročitajte log deploya. Ako je build pao, host možda nije postavio ništa ili je postavio staru verziju.
• index.html je na najvišem nivou objavljenog foldera, a ne u podfolderu.
• Osnovna putanja se poklapa. Ako se aplikacija servira s example.com/app/, mora biti izgrađena s tom osnovnom putanjom (Vite-ov base, React Routerov basename), inače svaka ruta i resurs promašuju.

Korak 4: Popravite nedostajuće datoteke i pogrešne putanje

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

• Osjetljivost na velika i mala slova. macOS i Windows obično tretiraju Logo.png i logo.png kao istu datoteku. Većina Linux servera ne. Neka svaka referenca tačno odgovara stvarnom nazivu datoteke.
• Datoteke izvan builda. U Vite-u se datoteke u public/ kopiraju kakve jesu i referenciraju iz korijena (/logo.png). Datoteke uvezene u kodu se pakuju u bundle. Datoteka smještena negdje drugdje u projektu možda uopšte nije postavljena.
• Relativne putanje. images/photo.jpg se razrješava u odnosu na trenutni URL, pa se kvari na /blog/post-1. Koristite /images/photo.jpg.
• Postavljene datoteke sačuvane na lokalnom disku. Ako su korisnički uploadi upisani u vlastiti folder servera, nestaju kada se objavi nova verzija. Koristite pravo skladište datoteka.

Korak 5: Dosljedno rukujte završnim kosim crtama

/about i /about/ su različiti URL-ovi. Hostovi se razlikuju po tome dodaju li ili uklanjaju kosu crtu, a nepodudaranje s vašim linkovima ili ruterom može izazvati 404 greške ili petlje preusmjeravanja. Odaberite jedan stil, neka vaši linkovi koriste taj stil i konfigurišite host da preusmjerava drugi oblik na njega. Dosljednost pomaže i pretraživačima, koji inače mogu vidjeti dvije kopije svake stranice.

Korak 6: Popravite API rute koje daju 404

Ako se stranica učitava, ali karticu Network pokazuje da /api/... zahtjevi vraćaju 404:

• Backend nije postavljen. Statički host servira samo datoteke; backend mora raditi negdje.
• Putanja je drugačije rutirana u produkciji. U razvoju je proxy možda prosljeđivao /api na zaseban server. U produkciji host treba ekvivalentan rewrite, ili front end mora pozivati stvarnu adresu API-ja.
• SPA povratna opcija ga je uhvatila. Zahtjev za API koji vraća index.html sa statusom 200 znači da je pravilo za povratnu opciju preširoko. Isključite /api/* iz njega.

Objavljena aplikacija dobija 404 na zahtjeve za /api/orders, a u pregledu rade. Provjerite kako je /api rutiran u pregledu naspram objavljene aplikacije i neka objavljeni front end dolazi do backenda na isti način.

Korak 7: Preusmjerite stare URL-ove

Ako ste se preselili s drugog sajta ili restrukturirali sajt, stari URL-ovi koje ljudi i pretraživači i dalje koriste daće 404. Dodajte 301 (trajno) preusmjeravanje sa svakog starog URL-a na njegovo novo mjesto. Vodite spisak i nakon lansiranja testirajte uzorak. Naš vodič o migraciji WordPress sajta pokriva izradu tog spiska.

Korak 8: Provjerite 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š nema domen vezan za vaš sajt. Provjerite DNS zapise i postavke domena na hostu. Pogledajte kako povezati prilagođeni domen.

Učinite pravu 404 stranicu korisnom

Neke 404 greške su ispravne: neko je pogrešno otkucao URL. Neka ta stranica bude korisna:

• Kratka poruka i link na početnu stranicu i ključne sekcije
• Polje za pretragu, ako sajt ima pretragu
• Isto zaglavlje i navigacija kao i ostatak sajta

Tamo gdje to vaše postavke dozvoljavaju, vratite pravi 404 status za stranice koje ne postoje. Poruka „nije pronađeno” vraćena sa statusom 200 je ono što pretraživači nazivaju mekim 404, a ona može potrošiti njihovo vrijeme pretrage i zbuniti indeksiranje.

Česte greške

• Testiranje samo klikanjem. Uvijek testirajte tako što ćete duboke URL-ove nalijepiti u novi tab i osvježiti.
• Povratna opcija koja hvata sve. Resursi i API rute vraćaju index.html, što izaziva prazne stranice i zbunjujuće API greške.
• Neusklađena velika i mala slova koja puknu samo na serveru.
• Objavljivanje izvornog foldera umjesto izlaza builda.
• Restrukturiranje URL-ova bez preusmjeravanja. Svaki stari link postaje 404.

404 greške u Mythexu

U Mythexu objavljujete iz radnog prostora, a statički front end-i se postavljaju kao statički sajtovi. Ako objavljena stranica daje 404, dajte agentu tačan URL, recite da li se to dešava pri osvježavanju ili pri kliku, šta pokazuje kartica Network i zamolite ga da provjeri rutiranje. Nakon ispravke ponovo objavite, jer je živa aplikacija snimak sve dok je ponovo ne objavite. Ako ste nedavno mijenjali projekat, a živi sajt izgleda staro, ponovo objavite i uradite tvrdo osvježavanje. Koristite Popravi uz AI u dijalogu za objavu ako build padne. Pogledajte Kako objaviti i Rješavanje problema pri objavi u dokumentaciji, kao i naš vodič o otklanjanju grešaka u aplikaciji napravljenoj uz AI.

Kontrolna lista za 404 greške

• Zabilježeno tačno koji URL-ovi daju 404 i da li pri kliku, osvježavanju ili oboje
• SPA povratna opcija servira index.html za rute aplikacije, sa statusom 200
• Povratna opcija isključuje stvarne datoteke i /api/*
• Ruter ima catch-all rutu „nije pronađeno”
• Folder izlaza builda je ono što se objavljuje i build je uspio
• Osnovna putanja se poklapa s mjestom gdje se aplikacija servira
• Velika i mala slova u nazivima datoteka se poklapaju sa svakom referencom
• Putanje resursa počinju sa /
• Stil završnih kosih crta je dosljedan
• API rute su postavljene i rutirane u produkciji
• 301 preusmjeravanja za stare URL-ove
• Duboki linkovi testirani lijepljenjem u novi tab

Pitanja