6.4 Fullstack-applikasjoner

To halvdeler blir en helhet

Nå skal vi koble sammen frontend og backend til komplette fullstack-applikasjoner. Frontend er ofte skrevet i JavaScript, backend i Flask, og de kommuniserer gjennom et API. For at samtalen skal være ryddig, følger vi REST – Representational State Transfer – en arkitekturstil med klare prinsipper.

Det første prinsippet er at ressurser identifiseres med URL-er: /brukere er samlingen av brukere, /brukere/5 er en bestemt bruker, og /brukere/5/innlegg er innleggene til bruker 5. Det andre er at HTTP-metoder angir operasjonen: GET henter, POST oppretter, PUT oppdaterer hele ressursen, PATCH oppdaterer deler, og DELETE sletter. Det tredje er at statuskoder kommuniserer resultatet: 200 OK for suksess, 201 Created når noe opprettes, 400 Bad Request ved ugyldig input, 404 Not Found når ressursen mangler, og 500 ved serverfeil. Og det fjerde er at data utveksles som JSON.

Med disse prinsippene blir et Flask-API forutsigbart. En GET-rute til /api/produkter returnerer hele listen med jsonify(produkter), 200. En GET-rute til /api/produkter/<int:id> finner ett produkt og returnerer 404 hvis det ikke finnes. En POST-rute oppretter et nytt produkt, validerer at de nødvendige feltene er med, og returnerer det nye produktet med 201. Hver rute gjør én ting, med riktig metode og riktig statuskode.

CORS-muren mellom domener

Nå oppstår et problem mange møter for første gang. Frontend kjører kanskje på localhost:3000 og backend på localhost:5000. Når JavaScript på den ene prøver å hente data fra den andre, blokkerer nettleseren forespørselen. Hvorfor? Av sikkerhetsgrunner. Nettlesere blokkerer som standard forespørsler fra én origin (domene) til en annen, for å hindre at ondsinnede nettsider stjeler data på dine vegne.

Løsningen heter CORS – Cross-Origin Resource Sharing. Backend må eksplisitt tillate forespørsler fra frontend. I Flask installerer du flask-cors og setter det opp. Under utvikling kan du tillate alt med CORS(app), men dette er kun for utvikling. I produksjon bør du være spesifikk og bare tillate dine egne domener, for eksempel CORS(app, origins=["https://mittdomene.no"]).

Under panseret handler CORS om HTTP-headere. Serveren legger til headere som Access-Control-Allow-Origin, som forteller nettleseren hvilke domener som har lov til å hente data, sammen med headere for tillatte metoder og innholdstyper. Du kan også sette disse manuelt med en @app.after_request-funksjon. Poenget er det samme: backend må gi nettleseren grønt lys før den slipper gjennom forespørsler fra et annet domene. Forstår du CORS, slipper du å bli stående fast på den vanligste feilen i fullstack-utvikling.

Når ting går galt: feilhåndtering i hele stacken

En god fullstack-applikasjon planlegger for at ting går galt – og håndterer det elegant i begge ender. På backend lager du robuste feilmeldinger. Med @app.errorhandler(404) og @app.errorhandler(500) kan du fange feil sentralt og returnere ryddig JSON i stedet for stygge HTML-feilsider, slik at frontend alltid får et forutsigbart svarformat. I hver rute returnerer du passende statuskoder selv: 404 med en feilmelding hvis en bruker ikke finnes, 200 med dataene hvis alt går bra.

På frontend må JavaScript håndtere disse feilene. Etter en fetch sjekker du response.ok, som er sann bare for vellykkede statuskoder. Er den usann, har du en HTTP-feil – en 4xx eller 5xx – og da leser du feilmeldingen fra serveren og kaster en Error:

if (!response.ok) {
  const error = await response.json();
  throw new Error(error.error || 'Noe gikk galt');
}

Denne feilen fanges av try/catch, og du kan vise brukeren en forståelig melding i stedet for at applikasjonen bare stopper i stillhet. Nøkkelen er at backend og frontend samarbeider: backend gir ærlige statuskoder og strukturerte feilmeldinger, og frontend leser dem og reagerer fornuftig. Slik blir hele stacken robust, og brukeren får alltid beskjed om hva som skjedde.

Oppsummering

Fullstack handler om å koble frontend og backend til en helhet. REST gir oss et felles språk: ressurser i URL-er, HTTP-metoder for operasjoner, statuskoder for resultat, og JSON som dataformat – noe et Flask-API følger naturlig. CORS løser den vanlige muren mellom ulike domener: backend må eksplisitt tillate forespørsler fra frontend, åpent under utvikling men begrenset i produksjon.

Til slutt så vi at feilhåndtering må skje i hele stacken: backend returnerer ærlige statuskoder og strukturerte feilmeldinger via errorhandlere, og frontend sjekker response.ok og fanger feil i try/catch så brukeren alltid får beskjed. Med dette kan du bygge robuste, moderne webapplikasjoner. I neste kapittel ser vi på brukeropplevelse og brukbarhetstesting.