Guia Completa per Solucionar el Problema de No Enviament de Cookies en Sol·licituds Cross-Origin (CORS)

Si us heu trobat amb un escenari on el servidor estableix la cookie correctament (visible a la resposta del navegador), però en sol·licituds posteriors, el navegador no retorna aquesta cookie al servidor, aquesta guia és per a vosaltres. Aquest problema gairebé sempre es produeix quan el frontend i el backend del vostre projecte es troben en dos dominis o ports diferents, per exemple, el frontend a app.example.com i l'API a api.example.com.

Per què passa això?

Els navegadors moderns imposen dues polítiques de seguretat estrictes per prevenir atacs CSRF i el segrest de sessions:

1. Política CORS: Per defecte, el navegador no permet que les sol·licituds entre dominis incloguin credencials (com cookies) tret que el servidor ho permeti explícitament.
2. Política SameSite: A partir de Chrome 80, les cookies es tracten amb comportament SameSite=Lax per defecte, cosa que significa que no s'enviaran en sol·licituds entre dominis tret que es defineixin explícitament amb SameSite=None.

El punt important és que per solucionar aquest problema, tant el client com el servidor s'han de configurar correctament. No n'hi ha prou amb modificar només un costat.

Primer pas: Configuració correcta del servidor

Tres regles d'or al costat del servidor

Regla 1 — Activar credencials: La capçalera de resposta del servidor ha d'incloure el següent valor:

Access-Control-Allow-Credentials: true

Regla 2 — No utilitzar comodins: Quan les credencials estan activades, no es pot utilitzar el caràcter * a la capçalera Access-Control-Allow-Origin. Cal especificar exactament l'adreça de domini completa del frontend:

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

Regla 3 — Atributs de la cookie: La cookie s'ha de definir amb dos atributs: SameSite=None i Secure. Sense aquests dos atributs, el navegador emmagatzemarà la cookie però mai l'enviarà en sol·licituds entre dominis.

Codi d'exemple a Node.js (Express)

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

const app = express();

app.use(cors({
  origin: 'https://app.example.com', // Domini exacte del frontend, sense /
  credentials: true
}));

app.post('/login', (req, res) => {
  res.cookie('session_token', 'abc123', {
    httpOnly: true,   // Evita l'accés de JavaScript a la cookie
    secure: true,     // Només s'envia a través de HTTPS
    sameSite: 'none', // Permet l'enviament en sol·licituds Cross-Origin
    maxAge: 24 * 60 * 60 * 1000
  });
  res.json({ message: 'Inici de sessió exitós' });
});

Codi d'exemple a PHP

<?php
// Especifica el domini exacte del frontend, no *
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");

// Respondre a la sol·licitud Preflight
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    http_response_code(204);
    exit;
}

// Establir la cookie amb els atributs necessaris
setcookie('session_token', 'abc123', [
    'expires'  => time() + 86400,
    'path'     => '/',
    'secure'   => true,      // Obligatori
    'httponly' => true,
    'samesite' => 'None'     // Obligatori per a Cross-Origin
]);

Nota: Si utilitzeu Laravel, establiu supports_credentials a true al fitxer config/cors.php i afegiu el domini del frontend a la matriu allowed_origins.

Segon pas: Configuració correcta del client (frontend)

Fins i tot amb una configuració completa del servidor, el navegador encara no enviarà les cookies tret que declareu explícitament al costat del client que aquesta sol·licitud és "amb credencials".

Utilitzant Fetch API

fetch('https://api.example.com/user/profile', {
  method: 'GET',
  credentials: 'include'  // Aquesta línia és la clau per resoldre el problema
})
  .then(res => res.json())
  .then(data => console.log(data));

Utilitzant Axios

// Per a una sol·licitud específica
axios.get('https://api.example.com/user/profile', {
  withCredentials: true
});

// O globalment per a tot el projecte
axios.defaults.withCredentials = true;

Llista de verificació per a la resolució de problemes

Si el problema persisteix després d'aplicar els passos anteriors, comproveu aquests elements en ordre:

• ✅ Ambdues parts estan a HTTPS? L'atribut Secure significa que la cookie només funciona en connexions xifrades. Si el vostre lloc està a HTTP, el navegador no acceptarà la cookie. (Excepció: entorn de desenvolupament a localhost)
• ✅ L'adreça Origin és exacta? L'adreça Access-Control-Allow-Origin ha de coincidir exactament amb la URL que veieu al navegador. Fins i tot una diferència a www o una barra final / provocarà un error.
• ✅ La sol·licitud OPTIONS és exitosa? A la pestanya Network de les eines de desenvolupament del navegador, comproveu la sol·licitud Preflight (amb el mètode OPTIONS). Aquesta sol·licitud s'ha de respondre amb el codi 200 o 204 i les capçaleres CORS correctes.
• ✅ La cookie s'ha emmagatzemat? Al navegador, aneu a DevTools ← Application ← Cookies i assegureu-vos que la cookie s'ha emmagatzemat amb els atributs Secure i SameSite=None.
• ✅ Teniu un proxy o tallafoc intermedi? De vegades Cloudflare o servidors web com Nginx reescriuen les capçaleres. Comproveu també la seva configuració.

Resum

L'enviament de cookies en sol·licituds entre dominis requereix la coordinació de tres factors: el servidor amb Access-Control-Allow-Credentials: true i Origin exacte, la cookie amb atributs SameSite=None; Secure, i el client amb l'activació de credentials: 'include' o withCredentials: true. Seguint aquests tres punts, el problema es resoldrà completament.

Infraestructura fiable, tranquil·litat per als desenvolupadors

La implementació correcta de CORS i la gestió de cookies només és una part de la història; la infraestructura en què s'executa el vostre projecte també té un paper decisiu en l'estabilitat i la seguretat del servei:

Allotjament Radib — Allotjament web d'alta velocitat amb suport complet per a SSL gratuït i configuració estàndard de capçaleres; una opció ideal per allotjar el frontend i el backend dels vostres projectes.

Servidor Virtual Radib — Si el vostre projecte requereix accés complet, recursos dedicats i llibertat en la configuració del servidor web (Nginx/Apache), els servidors virtuals Radib amb maquinari potent i xarxa estable són la millor opció per a API professionals.

Serveis de Depuració i Seguretat Radib — Si esteu tractant amb errors complexos de CORS, problemes d'autenticació o reptes de seguretat, l'equip tècnic de Radib, amb una àmplia experiència en la resolució de problemes i la seguretat d'aplicacions web, està al vostre costat per resoldre el problema des de l'arrel.