Átfogó útmutató a sütik kereszt-origin (CORS) kérésekben való elküldésének problémájához

Ha olyan forgatókönyvvel találkozott, ahol a szerver megfelelően beállítja a sütit (látható a böngésző válaszában), de a későbbi kérésekben a böngésző nem küldi vissza ezt a sütit a szervernek, ez az útmutató az Ön számára készült. Ez a probléma szinte mindig akkor fordul elő, amikor a projekt frontendje és backendje két különböző tartományon vagy porton található — például a frontend a app.example.com címen, az API pedig a api.example.com címen.

Miért történik ez?

A modern böngészők két szigorú biztonsági szabályzatot érvényesítenek a CSRF-támadások és a munkamenet-eltérítés megakadályozására:

1. CORS-szabályzat: Alapértelmezés szerint a böngésző nem engedélyezi a tartományok közötti kéréseknek, hogy hitelesítő adatokat (például sütiket) tartalmazzanak, kivéve, ha a szerver kifejezetten engedélyezi ezt.
2. SameSite-szabályzat: A Chrome 80-tól kezdve a sütiket alapértelmezés szerint SameSite=Lax viselkedéssel kezelik, ami azt jelenti, hogy nem küldik el őket tartományok közötti kérésekben, kivéve, ha kifejezetten SameSite=None értékkel vannak meghatározva.

A fontos pont az, hogy a probléma megoldásához mind a kliens, mind a szerver oldalt megfelelően kell konfigurálni. Csak az egyik oldal módosítása nem elegendő.

1. lépés: A szerver helyes konfigurálása

Három aranyszabály a szerver oldalon

1. szabály — Hitelesítő adatok engedélyezése: A szerver válaszfejlécének tartalmaznia kell a következő értéket:

Access-Control-Allow-Credentials: true

2. szabály — Nincs helyettesítő karakter: Amikor a hitelesítő adatok engedélyezve vannak, nem használhatja a * helyettesítő karaktert az Access-Control-Allow-Origin fejlécben. Pontosan meg kell adnia a frontend teljes tartománycímét:

Access-Control-Allow-Origin: https://app.example.com

3. szabály — Süti attribútumok: A sütit két attribútummal kell beállítani: SameSite=None és Secure. E két attribútum nélkül a böngésző tárolja a sütit, de soha nem küldi el tartományok közötti kérésekben.

Mintakód Node.js-ben (Express)

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

const app = express();

app.use(cors({
  origin: 'https://app.example.com', // Pontos frontend tartomány, / nélkül
  credentials: true
}));

app.post('/login', (req, res) => {
  res.cookie('session_token', 'abc123', {
    httpOnly: true,   // Megakadályozza a JavaScript hozzáférést a sütihez
    secure: true,     // Csak HTTPS-en keresztül küldje
    sameSite: 'none', // Lehetővé teszi a küldést Cross-Origin kérésekben
    maxAge: 24 * 60 * 60 * 1000
  });
  res.json({ message: 'Sikeres bejelentkezés' });
});

Mintakód PHP-ban

<?php
// Adja meg a pontos frontend tartományt, nem *
header("Access-Control-Allow-Origin: https://app.example.com");
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Allow-Headers: Content-Type, Authorization");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");

// Válasz a Preflight kérésre
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    http_response_code(204);
    exit;
}

// A süti beállítása a szükséges attribútumokkal
setcookie('session_token', 'abc123', [
    'expires'  => time() + 86400,
    'path'     => '/',
    'secure'   => true,      // Kötelező
    'httponly' => true,
    'samesite' => 'None'     // Kötelező Cross-Origin esetén
]);

Megjegyzés: Ha Laravel-t használ, állítsa a supports_credentials értéket true-ra a config/cors.php fájlban, és adja hozzá a frontend tartományt az allowed_origins tömbhöz.

2. lépés: A kliens (frontend) helyes konfigurálása

Még teljes szerverkonfiguráció esetén sem küldi a böngésző a sütiket, hacsak nem nyilatkoztatja ki kifejezetten a kliens oldalon, hogy ez a kérés "hitelesítő adatokkal" történik.

Fetch API használata

fetch('https://api.example.com/user/profile', {
  method: 'GET',
  credentials: 'include'  // Ez a sor a kulcs a probléma megoldásához
})
  .then(res => res.json())
  .then(data => console.log(data));

Axios használata

// Egy adott kéréshez
axios.get('https://api.example.com/user/profile', {
  withCredentials: true
});

// Vagy globálisan az egész projektre
axios.defaults.withCredentials = true;

Hibaelhárítási ellenőrzőlista

Ha a probléma a fentiek alkalmazása után is fennáll, ellenőrizze ezeket a tételeket sorrendben:

• ✅ Mindkét oldal HTTPS-en van? A Secure attribútum azt jelenti, hogy a süti csak titkosított kapcsolatokon működik. Ha az Ön webhelye HTTP-n van, a böngésző nem fogadja el a sütit. (Kivétel: fejlesztői környezet a localhost-on)
• ✅ Az Origin cím pontos? Az Access-Control-Allow-Origin címnek pontosan meg kell egyeznie a böngészőben látott URL-lel. Még egy különbség a www-ben vagy egy záró perjel / is hibát okoz.
• ✅ Az OPTIONS kérés sikeres? A böngésző fejlesztői eszközeinek Network fülében ellenőrizze a Preflight kérést (OPTIONS metódussal). Ezt a kérést 200-as vagy 204-es kóddal és a helyes CORS fejlécekkel kell megválaszolni.
• ✅ A süti tárolva van? A böngészőben lépjen a DevTools ← Application ← Cookies menüpontra, és győződjön meg arról, hogy a süti a Secure és SameSite=None attribútumokkal van tárolva.
• ✅ Van proxy vagy köztes tűzfal? Néha a Cloudflare vagy az olyan webszerverek, mint az Nginx, átírják a fejléceket. Ellenőrizze azok konfigurációját is.

Összefoglalás

A sütik tartományok közötti kérésekben való elküldéséhez három tényező összehangolása szükséges: a szerver Access-Control-Allow-Credentials: true és pontos Origin értékkel, a süti SameSite=None; Secure attribútumokkal, és a kliens credentials: 'include' vagy withCredentials: true aktiválásával. E három pont betartásával a probléma teljesen megoldódik.

Megbízható infrastruktúra, nyugalom a fejlesztők számára

A CORS helyes implementálása és a sütikezelés csak egy része a történetnek; az infrastruktúra, amelyen a projekt fut, szintén döntő szerepet játszik a szolgáltatás stabilitásában és biztonságában:

Radib Hosting — Nagy sebességű webhoszting ingyenes SSL és szabványos fejléc-konfiguráció teljes támogatásával; ideális választás projektjei frontendjének és backendjének hosztolásához.

Radib Virtual Server — Ha projektje teljes hozzáférést, dedikált erőforrásokat és szabadságot igényel a webszerver konfigurációjában (Nginx/Apache), a Radib virtuális szerverei erős hardverrel és stabil hálózattal a legjobb választást jelentik a professzionális API-khoz.

Radib hibakeresési és biztonsági szolgáltatások — Ha összetett CORS-hibákkal, hitelesítési problémákkal vagy biztonsági kihívásokkal küzd, a Radib műszaki csapata, mély tapasztalattal a webalkalmazások hibaelhárításában és biztosításában, segít megoldani a problémát a gyökertől.