Un dels moments més frustrants en el desenvolupament d'aplicacions web passa quan tot funciona perfectament en local i, en desplegar en producció, les peticions autenticades comencen a fallar sense mostrar errors clars. Aquest escenari, més comú del que sembla, sol deure's a una incorrecta gestió dels mecanismes de seguretat entre orígens diferents. La causa arrel no està en un bug evident, sinó en la diferència de comportament entre entorns: localhost tracta les peticions entre ports com 'mateix origen' de forma laxa, mentre que en producció, amb dominis o subdominis diferents, el navegador aplica polítiques estrictes de Cross-Origin Resource Sharing (CORS) i de cookies entre llocs.
El problema es manifesta típicament en aplicacions que separen el frontend (React, Angular, Vue) del backend (Express, Node, Django). En local, tots dos corren en local amb ports diferents: per exemple, l'objectiu d'aconseguir-ho. Tot i que tècnicament són orígens diferents (pel port), els navegadors solen ser més permissius durant el desenvolupament, permetent que les cookies s'enviïn sense necessitat de configuracions addicionals. No obstant això, en producció, quan el frontend se serveix des d'un CDN o un domini propi (per exemple, app.misitio.com) i el backend des de api.misitio.com o un domini totalment diferent, el navegador bloqueja l'enviament de credencials llevat que es compleixin tres condicions clau: la configuració CORS del servidor ha de permetre un origen explícit (mai un comodí) i acceptar credencials; la cookie ha de tenir els atributs SameSite=None i Secure per ser enviada en contextos cross-site; i el frontend ha d'incloure explícitament l'opció credentials:'include' en fetch o withCredentials:true en axios.
El primer punt, la configuració CORS, és on molts desenvolupadors cauen en la temptació d'usar durant el desenvolupament local. Si bé funciona en local perquè no hi ha restricció de credencials, en producció el navegador ignora aquesta capçalera quan la sol·licitud inclou cookies o capçaleres d'autenticació. El servidor ha de respondre amb un origen específic (per exemple, Access-Control-Allow-Origin: https://app.misitio.com) i a més incloure Access-Control-Allow-Credentials: true. Aquesta és una limitació de seguretat deliberada del protocol: un origen comodí no es pot combinar amb credencials perquè permetria qualsevol lloc web maliciós llegir les cookies d'autenticació.
El segon element crític és la cookie de sessió o token. Històricament, les cookies s'enviaven a qualsevol domini que estigués al mateix lloc, però amb l'arribada de SameSite (Lax, Strict, None) els navegadors moderns restringeixen l'enviament automàtic de cookies a través d'orígens. Perquè una cookie sigui enviada des d'un origen a un altre, ha de tenir SameSite=None (enviament en tots els contextos) i Secure (només sobre HTTPS). Sense aquests atributs, el navegador simplement no inclourà la cookie en la petició cross-origin, fins i tot si el frontend la demana explícitament. Molts frameworks de servidor, com Express amb cookie-parser, no defineixen aquests atributs per defecte, per la qual cosa és responsabilitat del desenvolupador configurar-los en crear la cookie. A més, en entorns de desenvolupament local amb HTTP (localhost), la bandera Secure no es pot aplicar, cosa que reforça la falsa sensació que tot funciona.
El tercer factor, i potser el més fàcil de passar per alt, és que el frontend ha d'indicar explícitament que vol incloure credencials en la petició. A les APIs REST, les peticions fetch amb opcions per defecte no envien cookies ni capçaleres d'autorització llevat que s'especifiqui credentials: 'include'. En axis, l'equivalent és withCredentials: true. En local, de vegades el navegador envia les cookies de tota manera perquè ambdues aplicacions estan en el mateix host (localhost), però en producció és obligatori declarar-lo. Oblidar aquest detall provoca que el servidor rebi una petició sense sessió, i la decisió es manifesta com un 401 o un redireccionament que el frontend no maneja adequadament.
La solució, per tant, no és aplicar només una d'aquestes mesures, sinó alinear les tres: configurar CORS amb un origen específic i credentials: establir la cookie amb SameSite=None; Secure; i enviar credentials des del frontend. Quan aquestes tres peces encaixen, les peticions autenticades flueixen sense problemes en producció. Tanmateix, el veritable aprenentatge va més enllà del simple parxís: implica adoptar una mentalitat de desenvolupament orientada a entorns reals des del primer dia. En Q2BSTUDIO, quan desenvolupem programari a mida o aplicacions a mida, integrem aquestes pràctiques de manera sistemàtica des de la fase de disseny, evitant sorpreses en el desplegament. Per exemple, en els nostres projectes de ciberseguretat, revisem que les cookies de sessió compleixin amb els estàndards de protecció contra atacs CSRF i XSS, i que la configuració CORS no exposi vulnerabilitats. A més, quan despleguem solucions en serveis cloud AWS i Azure, assegurem que els balancejadors de càrrega i els certificats SSL estiguin correctament configurats per habilitar l'atribut Secure a les cookies.
Aquest problema també revela una oportunitat per modernitzar l'arquitectura d'autenticació. Molts equips opten per usar tokens JWT en lloc de cookies per evitar els líders de CORS i SameSite, tot i que això introdueix altres desafiaments com l'emmagatzematge segur del token al frontend. En Q2BSTUDIO oferim serveis d'intel·ligència de negoci amb Power BI i també desenvolupem agents IA que s'integren mitjançant APIs segures, on l'autenticació sol basar-se en tokens amb capçaleres d'autorització, la qual cosa evita els problemes de cookies cross-origin. No obstant això, per a aplicacions que hereten sistemes amb sessions basades en cookies, la triple alineació descrita és indispensable.
L'experiència demostra que confiar que 'en local funciona' és una trampa. Les diferències entre entorns de desenvolupament i producció no són només de configuració, sinó de context d' execució. Per això, en Q2BSTUDIO recomanem incloure en els pipelins d'integració contínua proves que verifiquin el comportament cross-origin, per exemple usant eines com corsproxy o simulant un desplegament en un entorn de staging amb dominis reals. A més, els nostres equips d'enginyeria apliquen bones pràctiques en l'ús de serveis cloud AWS i Azure per garantir que les polítiques de seguretat no bloquegin accidentalment les credencials. També desenvolupem solucions d'intel·ligència artificial per a empreses, com assistents virtuals o sistemes de recomanació, que requereixen una capa d'autenticació robusta; en aquests casos, combinem agents IA amb APIs protegides mitjançant OAuth2 o tokens JWT, evitant els problemes inherents a cookies.
En resum, la fallada silenciosa de les peticions autenticades en passar de local a producció és un clàssic que es resol revisant tres punts clau: CORS amb origen explícit i credencials, cookie SameSite i Secure, i enviament explícit de credencials des del frontend. Però més enllà del parxís, aquest incident convida a reflexionar sobre la importància d'un enfocament integral en el desenvolupament d'aplicacions, on la seguretat i la compatibilitat entre entorns es considerin des de l'arrencada. En Q2BSTUDIO, com a empresa especialitzada en desenvolupament d'aplicacions a mida i serveis d'intel·ligència de negoci, entenem que cada detall compta per oferir solucions fiables. Per això, si el teu equip enfronta desafiaments similars, podem ajudar-te a dissenyar una arquitectura d'autenticació que funcioni sense contratemps tant en local com en producció, aprofitant la nostra experiència en serveis cloud AWS i Azure, ciberseguretat, intel·ligència artificial i Power BI. Al final, l'objectiu és que la teva aplicació no només funcioni, sinó que ho faci de manera segura, escalable i consistent en qualsevol entorn.
