CORS¶
El CORS (Cross-Origin Resource Sharing) és una política de seguretat del navegador que limita quan una pàgina web pot fer peticions a un servidor d’un altre domini, port o protocol diferent del seu propi origen.[1][3][7]
Què és l’origen?¶
L’origen d’una pàgina web és la combinació de:
- Protocol (p. ex.
https://) - Domini (p. ex.
www.milllocat.com) - Port (p. ex.
:443per HTTPS,:80per HTTP)
Si dos URLs difereixen en qualsevol d’aquests tres elements, es consideren d’origen diferent.[7][13]
Què fa el CORS?¶
El navegador, per seguretat, impedeix que el JavaScript d’una pàgina accedeixi a recursos (APIs, imatges, fonts, etc.) d’un altre origen, llevat que el servidor d’aquell recurs ho permeti explícitament.[11][7]
Per exemple:
- Frontend:
https://app.milllocat.com(port 443) - Backend/API:
https://api.milllocat.com(port 443)
Tot i que el domini és similar, si el frontend intenta fer una petició AJAX a l’API, el navegador la bloquejarà si l’API no inclou les capçaleres CORS adequades.[3][1]
Per què existeix CORS?¶
Serveix per evitar atacs com:
- Que una web maliciosa llegeixi dades sensibles d’una API d’un altre lloc (p. ex. dades de l’usuari d’un banc).
- Que una web externa enviï formularis o peticions a un sistema intern sense que l’usuari ho vulgui.
És una capa de seguretat que protegeix l’usuari i els servidors.[15][7]
Quines problemàtiques causa en desenvolupament?¶
En entorns de desenvolupament, el CORS és una de les causes més freqüents d’errors que no es veuen al fer proves amb Postman o curl, però sí al navegador.[4][1]
1. Error típic al navegador¶
El navegador mostra un error com:
Access to fetch at 'https://api.externa.com/data' from origin 'http://localhost:4200' has been blocked by CORS policy
Això vol dir que el servidor de l’API no ha permès explícitament que el frontend de localhost:4200 accedeixi a aquell recurs.[1][3]
2. Problemes amb el backend¶
- El backend ha de configurar capçaleres com
Access-Control-Allow-Origin,Access-Control-Allow-Methods,Access-Control-Allow-Headers, etc..[13][7] - Si es fa una petició complexa (p. ex. amb capçaleres personalitzades o mètodes com
PUT/DELETE), el navegador primer envia una peticióOPTIONS(preflight), i el backend ha de respondre correctament a aquesta petició.[4][7]
3. Problemes amb el frontend¶
- El frontend pot funcionar perfectament amb Postman o Insomnia, però fallar al navegador per culpa del CORS.[3][1]
- A vegades, es confon el problema amb un error de backend (p. ex. 404 o 500), quan en realitat el backend respon bé, però el navegador no deixa que el JS llegeixi la resposta.[1][4]
4. Entorns de desenvolupament vs producció¶
- En desenvolupament, sovint es treballa amb
localhosti ports diferents (p. ex. frontend a:4200, backend a:8080), cosa que genera CORS.[3][1] - En producció, si frontend i backend estan en dominis diferents (p. ex.
app.milllocat.comiapi.milllocat.com), cal configurar CORS correctament, o la web no funcionarà.[7][13]
Com es soluciona?¶
- Backend: Configurar les capçaleres CORS per permetre els orígens, mètodes i capçaleres que necessita el frontend.[13][7]
- Frontend (temporal): En desenvolupament, es pot usar un proxy (p. ex.
proxy.conf.jsona Angular) o un servidor intermediari per evitar el CORS.[9][1] - No desactivar CORS al navegador: És una mala pràctica; cal resoldre el problema a nivell de servidor, no desactivant la seguretat del navegador.[11][15]
En resum: el CORS és una protecció important, però en desenvolupament pot ser una font de frustració si no es configura bé al backend.[7][1]