Kako popraviti greške 404 nakon objave web stranice ili aplikacije

Ako vaša aplikacija radi lokalno, ali stranice nakon deployja vraćaju 404, najčešći uzrok je nedostajuće SPA (single-page application) rutiranje: poslužitelj traži datoteku /dashboard koja ne postoji, jer ta ruta postoji samo u JavaScriptu. Rješenje je pravilo za povrat koje poslužuje index.html za rute aplikacije. Drugi 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 nikad nisu deployane.

Počnite tako da zabilježite točno koji URL daje 404 i kako ste do njega došli. Obrazac odmah upućuje na uzrok.

Korak 1: Pronađite obrazac

Za pravi statusni kod otvorite alate za razvojne programere (desni klik → Inspect ili Pregledaj), idite na karticu Network (Mreža), osvježite stranicu i pogledajte status prvog zahtjeva.

Korak 2: Dodajte SPA povrat

Ovo je klasičan slučaj. U React, Vue ili Svelte aplikaciji s jednom stranicom poslužitelj ima samo nekoliko pravih datoteka: index.html i neke JavaScript i CSS datoteke. Rute poput /dashboard ili /projects/42 obrađuje router u pregledniku.

• Klik na poveznicu radi: router mijenja URL i iscrtava novu stranicu bez pitanja poslužitelja.
• Osvježavanje ili izravno otvaranje poveznice ne radi: preglednik traži od poslužitelja /dashboard, poslužitelj nema takvu datoteku i vraća 404.

Rješenje je pravilo koje kaže: ako zahtjev ne odgovara pravoj datoteci, poslužite index.html sa statusom 200 i prepustite upravljanje routeru. Kako to dodati ovisi o hostu (provjerite trenutnu dokumentaciju hosta, jer se detalji mijenjaju):

Pazite da pravilo ne „pojede” prave datoteke: zahtjevi za /assets/app.js moraju i dalje vraćati JavaScript datoteku. Ako umjesto toga vraćaju index.html, dobit ćete prazan ekran s greškom „Failed to load module script”. Pogledajte kako popraviti prazan bijeli ekran.

Dajte routeru i catch-all rutu kako bi URL-ovi koji ne odgovaraju nijednoj stranici prikazali prijateljsku poruku „Stranica nije pronađena” umjesto ničega.

Ako ne možete mijenjati postavke poslužitelja, hash rutiranje (URL-ovi poput /#/dashboard) zaobilazi problem, jer dio nakon # nikad ne ide na poslužitelj. To je zaobilazno rješenje, a ne prvi izbor: URL-ovi su ružniji i manje prijateljski tražilicama.

Okviri koji stranice renderiraju na poslužitelju ili ih generiraju pri buildu (Next.js, Astro i slični) obično imaju prave datoteke ili rute na poslužitelju za svaku stranicu, pa je ovaj problem tamo rjeđi. Njihov ekvivalent je stranica koja nikad nije generirana pri buildu.

Korak 3: Provjerite što je zapravo deployano

Ako sve daje 404, poslužitelj vjerojatno ne poslužuje vašu izgrađenu aplikaciju.

• Prava mapa. Host mora objavljivati izlaz builda (uobičajeno dist za Vite, build za Create React App, out za statički Next.js export), a ne korijensku mapu projekta.
• Build je prošao. Pročitajte log deployja. Ako je build pao, host možda nije deployao ništa ili je deployao staru verziju.
• index.html je na vrhu objavljene mape, a ne u podmapi.
• Osnovna putanja odgovara. Ako se aplikacija služi s example.com/app/, mora biti izgrađena s tom osnovnom putanjom (Vite base, React Router basename), inače svaka ruta i imovina promašuju.

Korak 4: Popravite datoteke koje nedostaju i pogrešne putanje

Kad se stranice učitavaju, ali imovina daje 404:

• Osjetljivost na velika i mala slova. macOS i Windows obično tretiraju Logo.png i logo.png kao istu datoteku. Većina Linux poslužitelja ne. Svaka referenca mora točno odgovarati stvarnom imenu datoteke.
• Datoteke izvan builda. U Viteu se datoteke u public/ kopiraju kakve jesu i referenciraju iz korijena (/logo.png). Datoteke uvezene u kodu se pakiraju u bundle. Datoteka negdje drugdje u projektu možda uopće nije deployana.
• Relativne putanje. images/photo.jpg rješava se u odnosu na trenutni URL, pa pada na /blog/post-1. Koristite /images/photo.jpg.
• Prenesene datoteke spremljene na lokalni disk. Ako su korisnički uploadovi zapisani u mapu samog poslužitelja, nestaju kad se objavi nova verzija. Koristite pravu pohranu datoteka.

Korak 5: Dosljedno rukujte završnim kosim crtama

/about i /about/ su različiti URL-ovi. Hostovi se razlikuju u tome dodaju li ili uklanjaju kosu crtu, a neusklađenost s vašim poveznicama ili routerom može dati 404 ili petlju preusmjeravanja. Odaberite jedan stil, neka poveznice koriste isti i konfigurirajte host da preusmjeri drugi oblik na njega. Dosljednost pomaže i tražilicama, koje inače mogu vidjeti dvije kopije svake stranice.

Korak 6: Popravite API rute koje daju 404

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

• Back-end nije deployan. Statički host poslužuje samo datoteke; back-end mora raditi negdje drugdje.
• Putanja je drugačije rutirana u produkciji. U razvoju je proxy mogao prosljeđivati /api na zaseban poslužitelj. U produkciji host treba ekvivalentan rewrite, ili front-end mora pozivati stvarnu adresu API-ja.
• SPA povrat je uhvatio zahtjev. API zahtjev koji vraća index.html sa statusom 200 znači da je pravilo povrata preširoko. Isključite /api/* iz njega.

Objavljena aplikacija za zahtjeve na /api/orders vraća 404, ali u pregledu rade. Provjerite kako je /api rutiran u pregledu, a kako u objavljenoj aplikaciji, i učinite da objavljeni front-end dolazi do back-enda na isti način.

Korak 7: Preusmjerite stare URL-ove

Ako ste se preselili s druge stranice ili restrukturirali web stranicu, stari URL-ovi koje ljudi i tražilice još koriste dat će 404. Dodajte 301 (trajno) preusmjeravanje sa svakog starog URL-a na njegov novi dom. Vodite popis i nakon lansiranja testirajte uzorak. Naš vodič o migraciji WordPress stranice pokriva izradu tog popisa.

Korak 8: Provjerite domenu

Ako aplikacija radi na adresi hosta, ali daje 404 na vašoj prilagođenoj domeni, domena možda pokazuje na krivi projekt ili host još nema povezanu domenu s vašom stranicom. Provjerite DNS zapise i postavke domene na hostu. Pogledajte kako povezati prilagođenu domenu.

Učinite pravu stranicu 404 korisnom

Neki 404-ovi su ispravni: netko je pogrešno upisao URL. Učinite tu stranicu korisnom:

• Kratka poruka i poveznica na početnu stranicu i ključne odjeljke
• Polje za pretragu, ako stranica ima pretragu
• Isto zaglavlje i navigacija kao i ostatak stranice

Gdje to vaša postavka dopušta, za stranice koje ne postoje vratite pravi 404 status. Poruka „nije pronađeno” vraćena sa statusom 200 ono je što tražilice zovu meki 404, a može trošiti njihovo vrijeme za crawlanje i zbuniti indeksiranje.

Česte greške

• Testiranje samo klikanjem. Uvijek testirajte tako da duboke URL-ove zalijepite u novi tab i osvježite.
• Povrat koji hvata sve. Imovina i API rute vraćaju index.html, što uzrokuje prazne stranice i zbunjujuće API greške.
• Neusklađena velika i mala slova koja pucaju tek na poslužitelju.
• Deployanje izvorne mape umjesto izlaza builda.
• Restrukturiranje URL-ova bez preusmjeravanja. Svaka stara poveznica postaje 404.

404 u Mythexu

U Mythexu objavljujete iz radnog prostora, a statički front-endovi se deployaju kao statička mjesta. Ako objavljena stranica daje 404, dajte agentu točan URL, recite javlja li se pri osvježavanju ili pri kliku i što pokazuje kartica Network, te ga zamolite da provjeri rutiranje. Nakon ispravka ponovno objavite, jer je živa aplikacija snimka dok je ponovno ne objavite. Ako ste nedavno mijenjali projekt, a živa stranica izgleda staro, ponovno objavite i osvježite uz zaobilaženje predmemorije. Ako build pukne, koristite Popravi s AI u dijalogu za objavu. Pogledajte Kako objaviti i Rješavanje problema s objavom u dokumentaciji te naš vodič o otklanjanju grešaka u aplikaciji izgrađenoj uz AI.

Popis za 404

• Zabilježeno koji URL-ovi daju 404 i jesu li pri kliku, osvježavanju ili oboje
• SPA povrat šalje index.html za rute aplikacije, sa statusom 200
• Povrat isključuje prave datoteke i /api/*
• Router ima catch-all rutu „nije pronađeno”
• Mapa izlaza builda je ono što se objavljuje i build je uspio
• Osnovna putanja odgovara mjestu na kojem se aplikacija služi
• Velika i mala slova u imenima datoteka odgovaraju svakoj referenci
• Putanje imovine počinju s /
• Stil završnih kosih crta je dosljedan
• API rute su deployane i rutirane u produkciji
• 301 preusmjeravanja za stare URL-ove
• Duboke poveznice testirane lijepljenjem u novi tab

Pitanja