Esta semana tuve que trabajar en una pequeña aplicación hecha con VUE (ya veremos eso más adelante), que se conectara a un RestAPI que tuve que hacer con Django Rest FrameWork.
La API era sencilla, un único modelo, así que utilicé ViewSet y todo quedó excelente, pude hacer las peticiones desde VSCode o incluso desde un navegador.
Todo perfecto, ya tenía lo api 100% funcional, pero el problema vino cuando intenté consumirla desde la pequeña APP hecha con VUE.
Para esto, creé un archivo llamado Api.js y coloqué esto:
La aplicación de VUE levantó en el puerto 8081 de mi pc, por lo que estaría accesible como http://127.0.0.1:8081 y la api a consumir estaría en http://127.0.0.1:8000
Todo Perfecto, pero al comenzar a procesar, me topé que el siguiente error
Y, ¿qué es eso de CORS? Bueno, tomado de la wikipedia:
El intercambio de recursos de origen cruzado o CORS (Cross-origin resource sharing, en sus siglas en inglés) es un mecanismo que permite que se puedan solicitar recursos restringidos (como por ejemplo, las tipografías) en una página web desde un dominio fuera del dominio que sirvió el primer recurso.1 Una página web podría libremente incrustar imágenes, hojas de estilo, scripts, iframes y videos de origen cruzado.2 Ciertas peticiones de origen cruzado, más notablemente peticiones Ajax, están prohibidas por defecto por la política de seguridad del mismo origen (en inglés, same-origin security policy).
CORS define una forma en la cual el navegador y el servidor pueden interactuar para determinar si es seguro permitir una petición de origen cruzado. Esto permite tener más libertad y funcionalidad que las peticiones de mismo origen, pero es adicionalmente más seguro que simplemente permitir todas las peticiones de origen cruzado. La especificación para CORS fue originalmente publicada como una recomendación de la W3C4 pero dicho documento se encuentra obsoleto.5 La especificación actual mantenida activamente que define CORS es el estándar Fetch (en inglés, Fetch Living Standard)6 del WHATWG.
Pero ya más en sencillo, CORS, es una forma que tenemos para permitir que puedan acceder a un recurso que no está en el mismo servidor, por defualt, los navegadores bloquearán algo que aunque esté en el mismo servidor (en mi caso 127.0.0.1), no así en el mismo puerto (8000 el api y 8081 el que quiere consumirlo), por lo que se supone es otro servicio y necesitamos habilitarlo.
Pero esto, no se hace en el FrontEnd, osea en la app de VUE (o REACT o Angular o lo que sea que estés usando), se debe hacer desde tu api, indicarle que debe permitir acceso al dominio y puerto de la app.
Lo haremos de la manera más sencilla. En nuestra aplicación en DRF, vamos a instalar un paquete llamado Django Cors Headers.
pip install django-cors-headers==2.4.0
Una vez instalado, vamos a configurarlo, esto es muy sencillo, todo lo haremos en el archivo Settings.py del proyecto en Django.
Básicamente es:
- Agregar en las aplicaciones instaladas: 'corsheaders'
- Agregar un middleware (de ser posible de primero): 'corsheaders.middleware.CorsMiddleware',
- Y finalmente agregar los dominios que estamos autorizando a que accedan al api con la tupla CORS_ORIGIN_WHITELIST
Y listo, ya tenemos habilitado nuestra aplicación para que pueda acceder y consumir el API hecho con Django Rest FrameWork.
¿Te interesaría aprender más sobre elaboración de RestFul API con Django? Te invito a que veas el curso que he publicado donde abordamos todas estas temáticas.
Click en cualquier de los siguientes enlaces para más información (o registro), no te arrepentirás:
Te espero en el próximo tutorial.
Hola, Soy Daniel Bojorge