evitar problemas de CORS en una app vue que llama a un api

 en el archivo vite.config.js

se agrega un proxy a la direccion del api

export default defineConfig({

  plugins: [vue()],

  server: {

    host: true,

    proxy: {

      '/api': {

        target: 'http://localhost:8080',

        changeOrigin: true

      }

    }

  }

})

en la view que llamamos al api, ahora la llamada será relativa:

 // Llamada al endpoint que acabamos de crear en Quarkus

    // Usamos backticks (`) para insertar la variable del slug

    const response = await axios.get(`/api/restaurants/${props.slug}`);

   

¿Por qué esto soluciona el problema?

Evita CORS: El navegador ve que la petición va al mismo origen (http://192.168.1.10:5173/api/...), por lo que no la bloquea.

Conectividad: Al usar una ruta relativa, si abres la app desde tu móvil (192.168.1.10), la petición se hará correctamente a esa IP y Vite la redirigirá al localhost de tu PC donde corre el backend. Si dejaras localhost en el código, el móvil intentaría conectarse a sí mismo y fallaría.

recordar que en el backend en el application.properties ya tenemos:

# Habilitar CORS para desarrollo

quarkus.http.cors=true

quarkus.http.cors.origins=http://192.168.1.10:5173

quarkus.http.cors.methods=GET,OPTIONS