Hvernig á að laga 404-villur eftir birtingu vefsíðu eða apps

Ef appið þitt virkar staðbundið en síður skila 404 eftir birtingu er algengasta orsökin vantandi SPA-leiðing (single-page app): þjónninn leitar að skrá sem heitir /dashboard og er ekki til, því leiðin er aðeins til í JavaScript. Lausnin er afturvísunarregla sem þjónar index.html fyrir leiðir appsins. Aðrar orsakir eru skrár sem vantar í byggingarúttakið, hástafanæmar slóðir, munur á skástriki í lok slóðar, röng grunnslóð og API-leiðir sem voru aldrei birtar.

Byrjaðu á því að skrá nákvæmlega hvaða slóð gefur 404 og hvernig þú komst þangað. Mynstrið vísar beint á orsökina.

Skref 1: Finndu mynstrið

Til að sjá raunverulega stöðukóðann skaltu opna þróunarverkfæri (hægrismelltu → Inspect), fara í Network-flipann, endurhlaða og skoða stöðu fyrstu beiðninnar.

Skref 2: Bættu við SPA-afturvísuninni

Þetta er klassíska tilfellið. Í React-, Vue- eða Svelte-einsíðuappi hefur þjónninn aðeins örfáar raunverulegar skrár: index.html og nokkrar JavaScript- og CSS-skrár. Slóðir eins og /dashboard eða /projects/42 eru afgreiddar af leiðara í vafranum.

• Að smella á tengil virkar: leiðarinn breytir slóðinni og teiknar nýju síðuna án þess að spyrja þjóninn.
• Endurhleðsla eða opnun tengils beint bilar: vafrinn biður þjóninn um /dashboard, þjónninn á ekki þá skrá og skilar 404.

Lausnin er regla sem segir: ef beiðnin passar ekki við raunverulega skrá, þjónaðu index.html með stöðunni 200 og láttu leiðarann taka við. Hvernig þú bætir henni við fer eftir hýsingu (athugaðu núverandi skjöl hýsingarinnar, því upplýsingar breytast):

Gakktu úr skugga um að reglan gleypi ekki raunverulegar skrár: beiðnir á /assets/app.js eiga enn að skila JavaScript-skránni. Ef þær skila index.html í staðinn færðu auða síðu með villunni „Failed to load module script“. Sjáðu hvernig á að laga auða, hvíta síðu.

Gefðu líka leiðaranum grípa-leið (catch-all) svo að slóðir sem passa ekki við neina síðu sýni vinalega „Síða fannst ekki“ í stað þess að sýna ekkert.

Ef þú getur ekki breytt stillingum þjónsins forðar kjötkássuleið (slóðir eins og /#/dashboard) vandanum, því hlutinn eftir # er aldrei sendur á þjóninn. Þetta er lausn en ekki fyrsta val: slóðirnar eru ljótari og verri fyrir leitarvélar.

Rammar sem birta síður á þjóninum eða búa þær til við byggingu (Next.js, Astro og sambærileg) eru yfirleitt með raunverulegar skrár eða þjónsleiðir fyrir hverja síðu, svo þetta vandamál er sjaldgæfara þar. Samsvörunin þar er síða sem var aldrei búin til við byggingu.

Skref 3: Athugaðu hvað var raunverulega birt

Ef allt gefur 404 þjónar hýsingin líklega ekki byggða appinu þínu.

• Rétta mappan. Hýsingin verður að birta byggingarúttakið (algengt dist fyrir Vite, build fyrir Create React App, out fyrir Next.js útflutning), ekki rót verkefnisins.
• Byggingin keyrði. Lestu birtingarskrána. Ef byggingin bilaði birti hýsingin kannski ekkert, eða eldri útgáfu.
• index.html er efst í birtu möppunni, ekki í undirmöppu.
• Grunnslóðin passar. Ef appið er þjónað frá example.com/app/ verður það að vera byggt með þá grunnslóð (base í Vite, basename í React Router), annars missa allar leiðir og eignir marks.

Skref 4: Lagaðu vantandi skrár og rangar slóðir

Þegar síður hlaðast en eignir gefa 404:

• Hástafanæmi. macOS og Windows meðhöndla yfirleitt Logo.png og logo.png sem sömu skrána. Flestir Linux-þjónar gera það ekki. Gakktu úr skugga um að hver tilvísun passi nákvæmlega við skráarnafnið.
• Skrár utan byggingarinnar. Í Vite eru skrár í public/ afritaðar óbreyttar og vísað í þær frá rótinni (/logo.png). Skrár sem eru fluttar inn í kóðanum eru bundnar í pakkann. Skrá sem liggur annars staðar í verkefninu gæti alls ekki verið birt.
• Hlutfallslegar slóðir. images/photo.jpg er leyst miðað við núverandi slóð, svo hún bilar á /blog/post-1. Notaðu /images/photo.jpg.
• Upphlaðnar skrár vistaðar á staðbundnum diski. Ef upphleðslur notenda voru skrifaðar í möppu þjónsins hverfa þær þegar ný útgáfa er birt. Notaðu almennilega skráageymslu.

Skref 5: Meðhöndlaðu skástrik í lok slóða samkvæmt

/about og /about/ eru ólíkar slóðir. Hýsingar eru mismunandi í því hvort þær bæta við eða fjarlægja skástrikið, og ósamræmi við tengla eða leiðarann getur valdið 404 eða endurbeiningarlykkjum. Veldu einn stíl, láttu tengla nota hann og stilltu hýsinguna þannig að hin gerðin endurbeinist á hann. Samræmi hjálpar líka leitarvélum, sem annars gætu séð tvö eintök af hverri síðu.

Skref 6: Lagaðu API-leiðir sem gefa 404

Ef síðan hleðst en Network-flipinn sýnir /api/...-beiðnir sem skila 404:

• Bakendinn er ekki birtur. Kyrrstæð hýsing þjónar aðeins skrám; bakenda verður að keyra einhvers staðar.
• Slóðin er leidd öðruvísi í framleiðslu. Í þróun gæti proxy hafa sent /api áfram á sérstakan þjón. Í framleiðslu þarf hýsingin sambærilega endurskrifun, eða framendinn verður að kalla á raunverulegu API-slóðina.
• SPA-afturvísunin greip hana. API-beiðni sem skilar index.html með stöðunni 200 þýðir að afturvísunarreglan er of víð. Undanskildu /api/* frá henni.

Birta appið fær 404 á /api/orders, en þær virka í forskoðuninni. Athugaðu hvernig /api er leidd í forskoðuninni og birta appinu, og láttu birta framendann ná í bakendann á sama hátt.

Skref 7: Endurbeindu gömlum slóðum

Ef þú hefur flutt frá annarri síðu eða endurskipulagt, gefa gamlar slóðir sem fólk og leitarvélar nota enn 404. Bættu við 301 (varanlegri) endurbeiningu frá hverri gamalli slóð á nýja staðsetningu. Haltu lista og prófaðu úrtak eftir opnun. Leiðbeiningin okkar um flutning WordPress-síðu fer yfir gerð þessa lista.

Skref 8: Athugaðu lénið

Ef appið virkar á slóð hýsingarinnar en gefur 404 á sérsniðna léninu þínu gæti lénið vísað á rangt verkefni, eða hýsingin hefur ekki tengt lénið við síðuna þína enn. Athugaðu DNS-færslurnar og lénsstillingar hýsingarinnar. Sjáðu hvernig á að tengja sérsniðið lén.

Gerðu raunverulegu 404-síðuna þína gagnlega

Sum 404 eru rétt: einhver skrifaði slóðina vitlaust. Gerðu þá síðu hjálplega:

• Stutt skilaboð og tengla á forsíðuna og lykilkafla
• Leitarreit, ef síðan er með leit
• Sama haus og leiðsögn og á restinni af síðunni

Þar sem uppsetningin leyfir skaltu skila raunverulegri 404-stöðu fyrir síður sem eru ekki til. Skilaboð um „ekki fundið“ með stöðunni 200 kallast mjúk 404 hjá leitarvélum, og þau sóa skriðtíma þeirra og rugla skráningu.

Algeng mistök

• Prófa aðeins með því að smella. Prófaðu alltaf með því að líma djúpslóðir í nýjan flipa og endurhlaða.
• Afturvísun sem grípur allt. Eignir og API-leiðir skila index.html, sem veldur auðum síðum og ruglingslegum API-villum.
• Ósamræmi í há- og lágstöfum sem brotnar aðeins á þjóninum.
• Birta frumkóðamöppuna í stað byggingarúttaksins.
• Endurskipuleggja slóðir án endurbeininga. Sérhver gamall hlekkur verður 404.

404 í Mythex

Í Mythex birtir þú úr vinnusvæðinu og kyrrstæð framendar birtast sem kyrrstæðar síður. Ef birt síða gefur 404 skaltu gefa agentinum nákvæma slóðina, hvort það gerist við endurhleðslu eða smell, og hvað Network-flipinn sýnir, og biðja hann um að athuga leiðina. Birtu aftur eftir lagfæringu, því appið í beinni er afrit þar til þú birtir aftur. Ef þú breyttir verkefninu nýlega og lifandi síðan lítur gömul út skaltu birta aftur og endurhlaða með hörðum hætti. Notaðu Laga með gervigreind í birtingarglugganum ef byggingin bilar. Sjáðu Hvernig á að birta og Úrræðaleit við birtingu í skjölunum, og leiðbeiningu okkar um villuleit í appi sem gervigreind smíðaði.

Gátlisti fyrir 404

• Skráð nákvæmlega hvaða slóðir gefa 404 og hvort það gerist við smell, endurhleðslu eða hvort tveggja
• SPA-afturvísun þjónar index.html fyrir leiðir appsins, með stöðunni 200
• Afturvísunin undanskilur raunverulegar skrár og /api/*
• Leiðari hefur grípa-leið fyrir „ekki fundið“
• Byggingarúttaksmappan er sú sem er birt, og byggingin tókst
• Grunnslóð passar við staðinn þar sem appið er þjónað
• Há- og lágstafir í skráarnöfnum passa við hverja tilvísun
• Slóðir eigna byrja á /
• Samræmdur stíll á skástriki í lok slóða
• API-leiðir birtar og leiddar í framleiðslu
• 301-endurbeiningar fyrir gamlar slóðir
• Djúptenglar prófaðir með því að líma þeim í nýjan flipa

Spurningar