CORS (Cross-Origin Resource Sharing) instellen voor websites in ServBay

In moderne webontwikkeling moet de frontend-applicatie (doorgaans draaiend op één domein) vaak communiceren met een backend API of andere diensten (die mogelijk op een ander domein of poort draaien). Standaard blokkeert het same-origin beleid van de browser zulke cross-origin verzoeken uit veiligheidsoverwegingen. Cross-Origin Resource Sharing (CORS) is een standaardmechanisme waarmee een server kan aangeven welke herkomsten toegang hebben tot zijn bronnen, zodat veilige cross-origin communicatie mogelijk wordt.

In dit artikel leer je hoe je eenvoudig CORS kunt inschakelen en configureren voor je website in de lokale ServBay webontwikkelomgeving, allemaal via de gebruiksvriendelijke ServBay-interface.

Wat is CORS?

Cross-Origin Resource Sharing (CORS) is een HTTP-headermechanisme waarmee een server aangeeft welke herkomsten (domeinen, protocollen, poorten) mogen communiceren met zijn resources. Als een webpagina een request doet naar een andere herkomst dan de hare, voert de browser een "cross-origin HTTP request" uit. Volgens het same-origin beleid worden zulke requests standaard geblokkeerd door de browser. CORS maakt een gecontroleerde communicatie tussen server en browser mogelijk, waarbij wordt vastgesteld of een cross-origin request toegestaan is.

Waarom hebben ontwikkelaars CORS-configuratie nodig?

Stel je bouwt een gescheiden frontend-backend app (bijvoorbeeld frontend op app.servbay.demo en backend API op api.servbay.demo), of je frontend moet een externe API aanroepen. Dan zal de browser deze cross-origin requests blokkeren door het same-origin beleid. Door CORS te configureren vertel je de browser dat de server aanvragen van jouw frontend mag ontvangen, zodat requests succesvol kunnen worden uitgevoerd.

Belangrijke CORS HTTP-response headers

Wanneer een server een cross-origin verzoek beantwoordt, bevat het enkele specifieke Access-Control-* HTTP-response headers. Op basis van deze headers bepaalt de browser of het cross-origin verzoek mag slagen. Dit zijn de belangrijkste CORS-parameters die je in ServBay kunt instellen (ze corresponderen met deze response headers):

1. Access-Control-Allow-Origin

   • Functie: De kernheader van CORS; specificeert van welke bron(nen) (domeinen) requests toegestaan zijn.
   • Waarden:
     • *: Hiermee staat je elke herkomst toe. Belangrijk: Hoewel handig, NIET aanbevolen voor productieomgevingen omdat elke site hiermee toegang krijgt tot jouw resources – potentieel een veiligheidsrisico.
     • https://servbay.demo: Alleen requests vanaf deze specifieke herkomst zijn toegestaan.
     • https://servbay.demo https://api.servbay.demo: Meerdere herkomsten toegestaan, gescheiden door een spatie.
   • Let op: Als een request cookies of HTTP-authenticatie moet meegeven (dus Access-Control-Allow-Credentials: true), mag je NOOIT * instellen. Geef dan altijd de specifieke herkomst(en) op.

2. Access-Control-Allow-Methods

   • Functie: Bepaalt welke HTTP-methodes toegestaan zijn voor cross-origin requests (zoals GET, POST, PUT, DELETE, OPTIONS).
   • Waarden: Bijvoorbeeld: GET, POST, PUT, DELETE, OPTIONS. Meerdere methodes gescheiden door een komma.
   • Let op: Voor "non-simple requests" (zoals requests met PUT of DELETE of custom headers) stuurt de browser eerst een "preflight request" met de methode OPTIONS. De server moet daarop reageren met o.a. deze header, zodat de browser weet welke methodes toegestaan zijn. Het opnemen van OPTIONS in de lijst is daarom meestal noodzakelijk.

3. Access-Control-Allow-Headers

   • Functie: Geeft aan welke custom HTTP request headers zijn toegestaan bij cross-origin requests.
   • Waarden: Bijvoorbeeld: Content-Type, Authorization, X-Requested-With. Meerdere headers gescheiden door een komma.
   • Let op: Als de frontend meer headers gebruikt dan de standaard "simple headers" (Accept, Accept-Language, Content-Language, Content-Type met waarde application/x-www-form-urlencoded, multipart/form-data of text/plain), dan stuurt de browser altijd een preflight request en moeten deze custom headers expliciet hier genoemd worden.

4. Access-Control-Allow-Credentials

   • Functie: Geeft aan of cross-origin requests gebruikerscredentials (zoals cookies, client SSL-certificaten of HTTP-authenticatie) mogen bevatten.
   • Waarden: true of false.
   • Let op: Wanneer je deze op true zet, mag je de waarde van Access-Control-Allow-Origin nooit op * zetten! Daarnaast moet je in je clientcode aangeven dat je credentials wilt meesturen (zoals xhr.withCredentials = true of fetch(url, { credentials: 'include' })).

CORS inschakelen en configureren in ServBay

ServBay biedt een intuïtieve grafische interface waarmee je per website CORS-instellingen eenvoudig kunt beheren. Zo doe je dat:

1. Open ServBay en ga naar de lijst met websites: Start de ServBay-app. Klik in de linkernavigatiebalk van het hoofdscherm op "Websites". Je ziet nu een lijst van alle lokaal geconfigureerde websites in ServBay.

2. Selecteer de website waarvoor je CORS wilt instellen: Zoek in de lijst de website waarvoor je CORS wilt configureren. Klik op de naam van de site om naar het detailconfiguratiescherm te gaan.

3. Zoek de CORS-instelling en schakel deze in: Scroll op de configuratiepagina naar beneden tot je het gedeelte "CORS" ziet. Standaard is CORS uitgeschakeld in ServBay. Zet de schakelaar naast dit gedeelte om van “uit” naar “aan”. Daarna worden de configuratievelden bewerkbaar.

4. Stel Access-Control-Allow-Origin in: Vul bij het veld "Access-Control-Allow-Origin" de herkomst(en) in die je wilt toestaan voor toegang tot deze site. Wil je meerdere herkomsten toestaan, scheid deze dan met een spatie. Bijvoorbeeld: https://frontend.servbay.demo https://anotherapp.servbay.demo. Gebruik in productie bij voorkeur geen *.

5. Stel Access-Control-Allow-Methods in: Voer bij "Access-Control-Allow-Methods" de toegestane HTTP-methodes in, gescheiden door een komma. Bijvoorbeeld: GET, POST, PUT, DELETE, OPTIONS. Zorg dat alle benodigde methodes (en meestal ook OPTIONS) aanwezig zijn.

6. Stel Access-Control-Allow-Headers in: Geef bij "Access-Control-Allow-Headers" aan welke custom HTTP request headers mogen worden meegestuurd, gescheiden door een komma. Bijvoorbeeld: Content-Type, Authorization, X-Custom-Header. Noem hier alleen de headers die jouw applicatie daadwerkelijk gebruikt.

7. Stel Access-Control-Allow-Credentials in (optioneel): Wil je cookies of authenticatiegegevens meesturen met cross-origin requests, zet dan de schakelaar naast "Allow-Credentials" op aan. Nogmaals: Gebruik in stap 4 dan NOOIT de waarde * bij Access-Control-Allow-Origin.

8. Sla je instelling op: Als alles is ingevuld, klik rechtsonder op "Opslaan" om je aanpassingen door te voeren. ServBay past de benodigde webserverconfiguratie (zoals Caddy of Nginx) automatisch aan; je hoeft de server niet handmatig te herstarten.

Voorbeeldconfiguratie

De volgende afbeelding toont een voorbeeld van CORS-configuratie voor de site “ServBay Demo Website” in ServBay:

Op basis van bovenstaande configuratie:

• Access-Control-Allow-Origin: https://frontend.servbay.demo https://api.servbay.demo
• Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
• Access-Control-Allow-Headers: Content-Type, Authorization
• Allow-Credentials: ingeschakeld (true)

Dit betekent dat alleen requests van https://frontend.servbay.demo en https://api.servbay.demo toegang krijgen tot de resources van “ServBay Demo Website”. Deze requests mogen gebruikmaken van de methodes GET, POST, PUT, DELETE, OPTIONS, kunnen de headers Content-Type en Authorization meesturen, en mogen credentials zoals cookies bevatten.

Let op & beste praktijken

• Kies voor veiligheid: In ontwikkel- en testomgevingen kan Access-Control-Allow-Origin: * handig zijn, maar in productie is het essentieel om de toegestane herkomsten te beperken tot de noodzakelijke, om de veiligheid te waarborgen.
• Preflight requests: Begrijp hoe preflight requests (met de OPTIONS-methode) werken – essentieel bij het debuggen van CORS-problemen. Zorg dat de server (via ServBay) deze requests correct afhandelt met de benodigde headers.
• Browsercache: Browsers cachen soms CORS-beleidsregels. Mocht je na aanpassingen in ServBay problemen ondervinden, probeer dan de cache te legen of test in een privévenster.
• CORS op applicatieniveau: Sommige webframeworks of libraries (zoals Laravel, Express.js, Spring Boot) laten ook CORS-configuratie op applicatieniveau toe. ServBay regelt de CORS-configuratie op webserver-niveau (Caddy/Nginx), wat meestal prioriteit heeft. In complexe scenario's kan afstemming tussen beide niveaus nodig zijn.
• Debuggingtools: Gebruik de netwerk-tab in de browserontwikkelaarstools (meestal via F12) om cross-origin requests en response-headers te bekijken. Daarmee kun je verifiëren of je CORS correct is ingesteld en waarom een request eventueel faalt.

Veelgestelde vragen (FAQ)

Q: Ik heb CORS geconfigureerd, maar mijn cross-origin requests mislukken nog steeds. Hoe los ik dit op?

A: Controleer het volgende:

1. Kijk in het browserconsole en de netwerk-tab: Fouten rond CORS worden bijna altijd gelogd in de console en zijn zichtbaar in de netwerk-tab, inclusief alle request- en responseheaders. Controleer of de juiste Access-Control-Allow-Origin, Access-Control-Allow-Methods en Access-Control-Allow-Headers aanwezig zijn, en of de waarden overeenkomen met de clientrequest.
2. Vergelijk de herkomstadressen: Zorg dat de bron in Access-Control-Allow-Origin (inclusief protocol, domein, poort) exact overeenkomt met de bron vanwaar de frontend request.
3. Check methodes en headers: Controleer of in Access-Control-Allow-Methods alle benodigde HTTP-methodes staan, en of Access-Control-Allow-Headers alle custom headers bevat die de request meestuurt.
4. Credentials: Als je cookies of credentials meestuurt, moet Allow-Credentials in ServBay aan staan en mag Access-Control-Allow-Origin niet op * staan. Ook moet je clientcode die optie inschakelen (withCredentials = true of fetch(..., { credentials: 'include' })).
5. Preflight requests: Bij non-simple requests, kijk of de browser een OPTIONS-preflightrequest verstuurt en of de server daarop juist reageert met de juiste CORS-responseheaders.
6. Instelling opslaan in ServBay: Zorg dat je altijd op “Opslaan” klikt na aanpassingen.

Q: Kan ik in ServBay één globale CORS-policy voor alle sites instellen?

A: In ServBay stel je CORS altijd per website in. Dit biedt maximale flexibiliteit en veiligheid. Een globale CORS-optie is momenteel niet beschikbaar; je dient, indien gewenst, elke site afzonderlijk te configureren.

Q: Hoe verwerkt ServBay mijn CORS-instellingen onder de motorkap?

A: ServBay gebruikt Caddy of Nginx als webserver. De CORS-instellingen die je in de ServBay UI maakt, worden automatisch vertaald naar de juiste configuratie-instructies (Caddyfile of Nginx-config). ServBay beheert en laadt deze instellingen, zonder dat je zelf code of configs hoeft aan te passen.

Samenvatting

Met de intuïtieve gebruikersinterface van ServBay kun je eenvoudig CORS inschakelen en configureren voor je websites in je lokale ontwikkelomgeving. Daarmee los je cross-origin problemen snel op. Door effectief gebruik te maken van belangrijke headers zoals Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers en Access-Control-Allow-Credentials, zorg je voor veilige en soepele cross-origin communicatie. Volg de adviezen en best practices uit dit artikel voor een soepele lokale webontwikkelingservaring!