14. Fallos y más fallos, ¿qué tal si leemos lo que tenemos delante?

Una jornada de las malas. De esas en las que parece que está todo roto, empezando por uno mismo.

Fallo 1: Token CSRF

Fallo de principiante. En el capitulo 13 finalizaba diciendo que no era capaz de enviar un POST. En la sigiente jornada me llevó bastante más tiempo seguir luchando contra el problema.

Hasta que buscando, me crucé con el concepto de CSRF Token que se utiliza en muchos sistemas, incluido Laravel, para proteger el acceso a usando el ataque basado enCross Site Request Forgery.

En este artículo de Pusher te lo cuentan con más detalle.

Excluímos la ruta del POST de la validación de dicho ataque y lo tenemos solucionado. Evidentemente habrá que pensar como hacerlo más adelante para no saltarse este tipo de controles.

app/Http/Middleware/VerifyCsrfToken.php

class VerifyCsrfToken extends Middleware
{
    protected $except = [
        '/api/v1/votes'
    ];
}

Fallo 2: CORS

Este no es tanto un fallo, es mucho peor el siguiente. El Intercambio de Recursos de Origen Cruzado (CORS) es la forma que el protocolo HTTP tiene de proteger los accesos de un servidor a otro. De esta forma tenemos que dar nuestros permisos para que desde el cliente se pueda acceder a la API.

Esto ya lo teníamos resuelto con un Middleware propio, pero no parecía ser suficiente, así que nada mejor que tirar de recursos conocidos e importar la librería laravel-cors

Ya tenía bastantes problemas como para ver que era el método OPTIONS y no el PUT el que me estaba dando el dolor de muelas.

Fallo 3: Export default

Seguimos cayendo en picado. Tampoco consigo construir una clase ApiClient para crear un módulo independiente de conexión a la API que estamos creando para nuestro cliente.

Es algo que siempre me gusta hacer, porque es fácil de aislar y así tienes las rutas y los prámetros de las peticiones bajo el mismo techo.

Creo la class en JavaScript, la exporto con el típico export default Name y no consigo que funcione. Lo logro de inmediato usando la exportación de cada función, pero me obceco en tener una clase con métodos.

Prueba que prueba, indingnado y a punto de empezar a golpear salvajemente las teclas, veo como importa, en el mismo proyecto las funciones del serviceWorker.js y obtengo la respuesta envuelto en lágrimas (si estoy exagerando, pero hay que darle color...)

Lo hacía bien, pero no lo importaba correctamente. Con el * lo tenía resuelto. (Aquí suspiro)

Finalmente es así:

src/api/ApiClient.js

export function get(path) {
  return fetch(process.env.REACT_APP_HOST_API + path);
}

src/App.js

import * as ApiClient from './api/ApiClient';
ApiClient.get('quotes/random')

Y dejo una referencia interesante por aquí: Import en JavaScript