singulars/funcionalitats/wp-react.md

@@ -163,9 +163,19 @@ L'oficina virtual utilitza les comunicacións [ajax](https://developer.mozilla.o
 Quan la nostra aplicació s'executi en el context de WP el nostre codi de React s'estarà executant sota el domini de la pàgina web de SomConnexio, [somconnexio.coop](https://somconnexio.coop). Aquest fenòmen no es dona si l'aplicació s'incrusta a la web pública a través d'un _iframe_, ja que aquest, tot i que visualment es mostra integrat a la pàgina, internament funciona com un context web diferents, com si el codi que s'executa dins l'_iframe_ estigués en una pestanya independent en un domini diferent. D'aquest fet se'n deriven dos problemàtiques a tenir en conta:
 
 1. Configuració de React: En el procés de compilació de React s'injecten, via variables d'entorn, els valors de les URL de les que ha de disposar l'aplicació per accedir a les diferents APIs via connexions http així com gestionar redireccions entre pàgines. Per evitar problemes de links trencats quan l'aplicació s'executi fora del seu domini natural, s'ha de controlar que aquestes variables d'entorn estiguin definides ben definides i permetin a React gestionar bé l'enrutament i les peticions de dades entre els dos dominis.
-2. Configuració de Django: Django disposa d'un arxiu de configuració on s'indica el domini al qual la nostra aplicació a de servir. Per defecte, qualsevol petició que no s'origini des d'aquest domini i arribi al procés de python és descartada. Aquesta és la configuració per defecte i està dissenyada com a mesura de seguretat per evitar atacs des d'origens desconeguts. Haurem de fer alguns canvis en la configuració de Django perquè l'aplicació reconegui el domini [somconnexio.coop](https://somconnexio.coop) com un domini vàlid i permeti a React accedir a la REST API des d'aquest domini sense generar problemes de CORS (Cros Origin Resource Sharing).
+2. Configuració de Django: Django disposa d'un arxiu de configuració on s'indica el domini al qual la nostra aplicació a de servir. Per defecte, qualsevol petició que no s'origini des d'aquest domini i arribi al procés de python és descartada. Aquesta és la configuració per defecte i està dissenyada com a mesura de seguretat per evitar atacs des d'origens desconeguts. Haurem de fer alguns canvis en la configuració de Django perquè l'aplicació reconegui el domini [somconnexio.coop](https://somconnexio.coop) com un domini vàlid i permeti a React accedir a la REST API des d'aquest domini sense generar problemes permisos CORS (Cros Origin Resource Sharing).
 
+Per resoldre el primer dels punts, haurem de crear una nova variable d'entorn: `REACT_APP_API_URL`. Aquesta variable serà l'encarregada d'informar a l'aplicació de React quin és el domini base al qual haurà d'apuntar per fer les peticions de dades corresponents. Fins ara, el domini sota el que corria l'aplicació de React i el domini sota el qual s'exposava la API eren sempre el mateix i aquest valor es podia inferir per context. En el nou escenari, això s'haura d'informar de forma explícita per permetre el sistema CORS.
 
+Per tal de modificar la configuració de Django i permetre múltiples dominis com a origens vàlids, farem ús de la llibreria [django-cors-headers](https://pypi.org/project/django-cors-headers/). Aquesta és un paquet de python que permet a Django incloure capçaleres CORS a les seves respostes. Un cop instal·lada i integrada a l'aplicació de Django, haurem de configurar-la perquè reconegui el domini de somconnexio.coop com a vàlid.
+
+```python
+# file: somoffice/settings.py
+CORS_ORIGIN_WHITELIST = [
+    "https://somconnexio.coop",
+    "https://somosconexion.coop"
+]
+```
 
 ### Desplegament