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

Minden modern webfejlesztő találkozott már a böngésző konzolján felvillanó, fenyegető piros hibaüzenettel: "Access to fetch at '...' from origin '...' has been blocked by CORS policy". Ez a hiba akkor jelentkezik, amikor a böngészőből futó frontend alkalmazás (pl. egy React app a localhost:3000-en) egy másik doménen vagy porton lévő backendről (pl. localhost:8080) próbál meg adatot kérni AJAX vagy Fetch API segítségével.

Mi is az a CORS és miért létezik?

A CORS (Cross-Origin Resource Sharing) egy kulcsfontosságú biztonsági mechanizmus, amelyet a webböngészők kényszerítenek ki. Ez egy kivételezési rendszer az alapvető SOP (Same-Origin Policy) nevű biztonsági szabály alól.

Az SOP célja, hogy megakadályozza, hogy egy rosszindulatú weboldal szkriptjei (amelyet a felhasználó éppen olvas) titokban adatokat lopjanak el, vagy műveleteket hajtsanak végre egy másik weboldalon (például a netbankjában), ahol a felhasználó éppen be van jelentkezve. A böngésző alapértelmezés szerint letilt minden olyan kérést, ahol a forrás (origin) protokollja (http/https), doménneve, vagy portja eltér a célpontétól.

A Preflight (Előzetes) kérés (OPTIONS)

Amikor a kliens (böngésző) egy "nem egyszerű" kérést (például POST kérést JSON törzzsel, vagy egyedi headerekkel) küld egy másik origóra, a böngésző először egy láthatatlan OPTIONS kérést, úgynevezett preflight request-et küld a szervernek. Ezzel "megkérdezi" a szervert, hogy: "Helló, a https://simplesolution.ro oldalról jövök, és egy POST kérést akarok küldeni JSON-nel. Megengeded?" Ha a szerver nem válaszol megfelelő engedélyező fejlécekkel, a böngésző blokkolja a ténylees kérést (CORS hiba).

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

Mivel a CORS-t a böngésző ellenőrzi a szerver válasza alapján, 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 a legkönnyebben a hivatalos cors NPM csomag (middleware) segítségével tehetjük meg:

const express = require('express');
// A cors csomag telepítése szükséges: npm install cors
const cors = require('cors'); 
const app = express();

// 1. Megoldás (Fejlesztéshez): Minden origin engedélyezése
// app.use(cors()); 

// 2. Megoldás (Éles környezet / Biztonságos megközelítés)
const corsOptions = {
    origin: ['https://simplesolution.ro', 'https://www.simplesolution.ro'], // Csak ezekről a doménekről érkező kéréseket engedjük
    methods: ['GET', 'POST', 'PUT', 'DELETE'], // Engedélyezett HTTP metódusok
    allowedHeaders: ['Content-Type', 'Authorization'], // Engedélyezett egyedi fejlécek
    optionsSuccessStatus: 200 // Régebbi böngészők kompatibilitása miatt
};

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'));

Összegzés

Fejlesztési (Development) fázisban az app.use(cors()) paraméterek nélkül a legkényelmesebb, mert minden origót engedélyez (Access-Control-Allow-Origin: *). Éles környezetben (Production) azonban ez komoly biztonsági rés lehet. Ilyenkor a fenti példához hasonlóan mindig korlátozzuk az engedélyezett doméneket a saját frontendünk doménjeire.

Gyakran Ismételt Kérdések (GYIK)

A Postman miért nem dob soha CORS hibát?

A Postman, a cURL és más szerver-szerver kommunikációs eszközök nem webböngészők. A CORS egy böngésző szintű biztonsági funkció. A Postman egyszerűen nem ellenőrzi az SOP-t és nem küld Preflight kéréseket, ezért az API hívások onnan mindig működnek.

Ezek is érdekelhetnek: