Wat is het probleem?

Je backend draait op http://localhost:4000. Je React-frontend straks op http://localhost:5173. Zodra je frontend data ophaalt van je backend, krijg je deze error:

CORS Error:

Access to fetch at 'http://localhost:4000/api/workouts' from origin
'http://localhost:5173' has been blocked by CORS policy

Wat is CORS?

CORS = Cross-Origin Resource Sharing.

Probleem: backend (poort 4000) en frontend (poort 5173) draaien op verschillende poorten. Voor de browser zijn dat verschillende "origins" en die mogen elkaar niet zomaar aanroepen.

Oplossing: de backend geeft expliciet toestemming aan de frontend. Dat doe je met de cors package.

CORS installeren

In je backend/ map:

npm install cors

CORS toevoegen aan server.js

import express from 'express';
import cors from 'cors';
import workoutRoutes from './routes/workoutRoutes.js';

const app = express();

// CORS toestaan voor frontend — VOOR alle andere middleware
app.use(cors({
  origin: 'http://localhost:5173'
}));

// Middleware voor JSON
app.use(express.json());

// Routes
app.use('/api/workouts', workoutRoutes);
Wat gebeurt hier?
  • app.use(cors(...)) — staat cross-origin requests toe.
  • origin: 'http://localhost:5173' — alleen deze URL mag bij je API.
  • Dit moet vóór app.use(express.json()) en vóór je routes.

Herstart je backend!

Na deze wijziging moet je server opnieuw starten (Ctrl+C en opnieuw npm run dev). Anders blijft de oude config draaien.

Zie het in actie — wat CORS écht doet

Je hebt nu de fix gezien. Maar wat doet die app.use(cors()) regel eigenlijk? Toggle hieronder tussen met en zonder CORS en zie het verschil.

Server config:
🖥️ React Frontend
localhost:5173
Request
GET http://localhost:4000/api/workouts
Resultaat in JavaScript
— nog niks —
⚙️ Express Backend
localhost:4000
Server config
app.use(cors())
Response headers
Content-Type: application/json
Access-Control-Allow-Origin: *
Event log
Kies een modus en klik op "▶ Stuur request"

Het misverstand dat we even rechtzetten:

Studenten denken vaak dat CORS de request blokkeert. Maar nee — de request gaat gewoon naar de server. De server ontvangt 'm. De server stuurt een response. Het is de BROWSER zelf die de response blokkeert als de juiste headers ontbreken.

Daarom werkt je backend prima als je 'm test met Postman of curl: die hebben geen CORS-check. Alleen browsers doen dat, voor security redenen.

Wat app.use(cors()) doet: het voegt de Access-Control-Allow-Origin: * header toe aan elke response. Zo weet de browser: "ja, deze server staat het toe dat mijn JavaScript op een ander domein 'm aanroept".

Testen

Doe een fetch vanuit je frontend (of een browser-console op localhost:5173):

fetch('http://localhost:4000/api/workouts')
  .then(res => res.json())
  .then(data => console.log(data));

Het werkt!

Geen rode CORS-error meer in de browser-console. Je ziet je data verschijnen.

Veelvoorkomende problemen

1. Nog steeds een CORS error

  • Backend herstart? Ctrl+C en opnieuw npm run dev.
  • URL klopt? Check of je origin: 'http://localhost:5173' hebt staan, niet 5174 of een ander poortnummer.
  • Heeft Vite een andere poort gekozen omdat 5173 bezet was? Pas dan de origin aan.

2. CORS staat nu helemaal open voor iedereen

In productie wil je dat niet. Voor lokaal ontwikkelen is een specifieke origin (zoals hierboven) prima.

3. cors() zonder opties

Dat staat alle origins toe. Werkt wel maar is onveilig. Liever expliciet je frontend-URL opgeven.

Volgende stappen

CORS staat. Tijd om je React-frontend te bouwen.

Basis

Frontend Setup

Vite-project naast je backend en eerste verbindingstest.

 Data

Lijst Tonen (GET)

Data ophalen en tonen in losse componenten.

Of bekijk het hele overzicht onder Frontend (React ↔ jouw backend) op de MERN-startpagina.