Nuestro primer fetch en Vue con CodeIgniter 4 - 07

▶

El siguiente paso es intentar consumir nuestra aplicación. Este listado que tenemos acá se consume vía GET —alerta de spoilers— no va a funcionar. Tenemos que configurar algo adicional, pero eso lo veremos en la siguiente clase. Aun así, es importante hacerlo para ver qué sucede, y luego te explico.

Entonces, primero tenemos que levantar la aplicación. Para eso, colocamos:

npm run dev

Realmente aquí podemos ejecutar varios comandos, pero no viene al caso ahora, ya que eso es algo de Node. No quiero complicar mucho, pero usualmente cuando colocamos este comando es porque queremos ejecutar uno de los que están definidos en el package.json. Por supuesto, estos se pueden personalizar según la herramienta, pero en nuestro caso no hace falta. Simplemente usamos dev, ya que es el comando que ya viene configurado.

Importaciones por defecto y por nombre

Recordemos un poco sobre las exportaciones en JavaScript. Aquí tenemos una exportación por nombre:

import { createApp } from 'vue'

Cuando usamos llaves ({}), significa que estamos importando un módulo por nombre. Puede que no se vea claramente dónde está esta exportación, ya que puede estar "oculta" dentro de algún otro módulo.

Y esta, en cambio, es una exportación por defecto:

import ListComponent from '@/components/CRUD/Movies/ListComponent.vue';

Cuando veas que no hay llaves, es una exportación por defecto. En este curso, vamos a usar principalmente exportaciones por defecto, porque así funcionan los componentes en Vue.

Componentes exportaciones por defecto

Peticiones HTTP con fetch y promesas

Para hacer peticiones HTTP, tenemos la API de fetch, que se encuentra disponible en vanilla JS:

console.log(fetch('http://code4movies.test/api/pelicula'))

Veremos que imprime <PROMISE>, como ya mencioné antes. Adicionalmente, veremos un error como este:

Access to fetch at 'http://code4movies.test/api/pelicula' from origin 'http://localhost:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Entonces, ya puedes ver por qué no funciona. Fíjate que fetch devuelve una promesa. Podemos resolverla con .then():

fetch('http://code4movies.test/api/pelicula')
.then(res => res.json())
.then(res => console.log(res))

Lo que sea esos lenguajes lo implementan en este caso javascript y es el por que de esta sintaxis puedes colocarla así con paréntesis si son muchos parámetros o sin digo puedes colocarlo así con por paréntesis si son varios parámetros o puedes prescindir de ellos si es solamente un parámetro:

param => expression
(param) => expression
(param1, paramN) => expression

CORS error en CodeIgniter 4

En CodeIgniter 4, por defecto, no permite conectar aplicaciones externas, como la de Vue, al hacer el fetch anterior, veremos:

Access to fetch at 'http://code4movies.test/api/pelicula' from origin 'http://localhost:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Nos encontramos con un error, tal como puedes ver. Sin embargo, aquí ya no queda claro lo que pasa: supuestamente debería estar la respuesta, pero no devuelve nada. Entonces es evidente que sucedió un problema, y el navegador nos indica de forma clara qué está pasando.

Este tipo de errores puedes buscarlos fácilmente en internet —copiar y pegar el mensaje ayuda mucho—, pero en esencia, lo que ocurre aquí es un tema de CORS (Cross-Origin Resource Sharing), o en español, intercambio de recursos de origen cruzado.

Aunque suena algo complicado, básicamente lo que estamos intentando hacer es intercambiar recursos (datos, información) entre aplicaciones que están en diferentes dominios. Por ejemplo, tu aplicación de Vue se encuentra corriendo en localhost:5173 y está intentando consumir recursos desde code4movies.test, que es otro dominio.

Y aquí entra la política de seguridad: por defecto, CodeIgniter 4 no permite este tipo de conexiones externas. ¿Por qué? Porque sería un gran riesgo permitir que cualquier aplicación (desarrollada por quien sea) pueda hacer peticiones libremente a nuestra API sin ningún tipo de autorización.

Incluso, tú puedes hacer peticiones desde cualquier parte del navegador hacia cualquier ruta de la aplicación, incluyendo la raíz. Y claro, si no hubiera restricciones, cualquier sitio malicioso podría explotar eso fácilmente.

Por eso, estas políticas existen para protegerte. Desde la perspectiva de CodeIgniter 4, tu aplicación de Vue es vista como un posible atacante que está tratando de consumir recursos sin permiso. Entonces, la API está protegida y bloquea la solicitud.