Category: Programación

Cuando tenemos que subir ficheros grandes a S3 en varias partes las peticiones PUT no deben llevar la cabecera “Content-Type”, pero Axios la pone por defecto y esto genera un error 403.

Para que Axios no añada esta cabecera hay que indicarlo expresamente usando el valor false:

headers: { "Content-Type": false }

Para probar con código PHP que irá en el futuro en un paquete de Composer podemos incluirlo en nuestra aplicación de esta forma:

• Creamos un repositorio de Github para el paquete (esto es obligatorio para poderlo subir a Packagist).
• Supongamos que nuestro paquete se llama karontek/bcons y que el repositorio está en /home/koas/bcons. En el fichero composer.json de la aplicación donde queramos usar ese paquete añadiremos:

"repositories": [
  {
    "type": "path",
    "url": "/home/koas/bcons"
  }
]

"require": {
  "karontek/bcons": "dev-main"
}

Estoy desarrollando bcons y el entorno de desarrollo de la aplicación web es el típico de Vue3 con Vite que abre un puerto para poderse conectar y que haga el refresco automático etc. En mi caso accedía con esta URL: http://bcons.local:4321

Pues bien, la API se ejecuta desde http://bcons.local/api y me estaba volviendo loco porque no había forma de crear las cookies desde el PHP de la API. Aunque en teoría el puerto no afecta a las cookies no conseguía que el navegador creara la cookie.

La solución es configurar nginx para que las peticiones al puerto 80 se redirijan al puerto 4321 que es donde Vite está sirviendo la app. Así quedaría el bloque de configuración (incluyendo la regla para que las peticiones a las API se ejecuten correctamente):

upstream devapp {
    server bcons.local:4321;
}

server {
  listen 80;
  listen [::]:80;
  proxy_hide_header X-Frame-Options;

  server_name bcons.local www.bcons.local;
  root /home/koas/Server/htdocs/bcons;
  index index.php index.html;

  location ~ \.php$ {
    include snippets/fastcgi-php.conf;
    fastcgi_pass unix:/run/php/php8.1-fpm.sock;
  }

  location /api/ {
     try_files $uri $uri/ /api/index.php?$query_string;
  }

  location / {
    proxy_pass http://devapp;
  }
}

Ahora accedo a la app de desarrollo a través de http://bcons.local (sin necesidad de especificar el puerto) y la cookie se crea sin problema.

Esta página es muy útil para verificar que hemos configurado correctamente las cabeceras de seguridad:

https://securityheaders.com

eruda es una librería para mostrar las herramientas de desarrollador en navegadores móviles, donde por lo general no es sencillo hacer esta depuración.

Voy a ir dejando por aquí cómo migrar ciertos elementos de Vue2 a Vue3 para tenerlo todo junto en un mismo sitio hasta que me lo aprenda.

Scoped slots

Dentro del componente:

slot(name="icons" :row="scope.row")

Para acceder al slot dentro del código del componente:

import { useSlots } from "vue";
const slots = useSlots();
console.log(slots.icons);

En el padre:

template(#icons="{ row }")
  div {{ row }}

nextTick

nextTick(() => {});

Acceder a los datos de una fila de el-table

template(#default="scope")
  pre {{ scope.row }}

Emitir eventos

const emit = defineEmits(["myEvent"]);

emit("myEvent", { foo: bar });

Llamar a un método de un componente desde una referencia

Por defecto todos los métodos del componente son privados, así que hay que indicar que queremos que se pueda acceder desde fuera:

defineExpose({ nombreDelMetodo1, nombreDelMetodo2 });

Si tenemos un contenedor con display: flex en nuestro documento no funcionarán los estilos CSS page-break-inside de sus hijos.