Mi az a CORS hiba, és hogyan javítsuk ki Express.js környezetben?

Minden webfejlesztő találkozott már a konzolon felvillanó piros hibaüzenettel: "Access to fetch at... has been blocked by CORS policy". Ez a hiba akkor jelentkezik, amikor a böngészőből futó frontend (pl. localhost:3000) egy másik doménen vagy porton lévő backendről (pl. localhost:8080) próbál meg adatot kérni.

A CORS (Cross-Origin Resource Sharing) egy biztonsági mechanizmus, amelyet a böngészők kényszerítenek ki (SOP - Same-Origin Policy). Célja, hogy megakadályozza, hogy egy rosszindulatú weboldal szkriptjei adatokat lopjanak el egy másik weboldalról a felhasználó nevében.

A CORS hiba feloldása Node.js / Express környezetben

Mivel a CORS-t a böngésző ellenőrzi, a szerver oldalon kell jeleznünk a válaszfejlécekben (Headers), hogy mely origóknak engedélyezzük a hozzáférést. Express.js környezetben ezt legkönnyebben a hivatalos cors middleware segítségével tehetjük meg:

const express = require('express');
const cors = require('cors');
const app = express();

// Engedélyezés egy konkrét domain számára (Biztonságos megközelítés)
const corsOptions = {
    origin: 'https://simplesolution.ro',
    optionsSuccessStatus: 200
};

app.use(cors(corsOptions));

app.get('/api/v1/data', (req, res) => {
    res.json({ message: "Sikeres, CORS-biztonságos adatkapcsolat!" });
});

app.listen(8080, () => console.log('Szerver fut a 8080-as porton'));

Fejlesztési fázisban az app.use(cors()) paraméterek nélkül minden origót engedélyez (*), de éles környezetben a fenti példához hasonlóan mindig korlátozzuk azt a saját frontend doménünkre.