Proyecto cliente SPA para la API de películas con Nuxt.js

Axios y primera petición

Axios es un cliente http basado en promesas que nos permitirá interactuar fácilmente con la api, para hacerlo deberemos configurar la ruta raíz en el fichero nuxt.config.js:

nuxt.config.js

axios: {
  baseURL: "http://127.0.0.1:8844/api/v1"
},

Para cargar las películas en la portada de nuestra página vamos a utilizar el método asyncData de Nuxt.js. En él importamos el módulo axios y realizaremos la petición:

pages/index.vue

asyncData ({ $axios }) {
  return $axios.get('/peliculas/')
  .then((res) => {
    console.log(res)
  })
}

Ahora si tenemos funcionando la API que enseñé a crear en mi otro curso y cargamos la página veremos que nos da un error cuando axios hace la petición, en la consola podremos leer:

Access to XMLHttpRequest at 'http://127.0.0.1:8844/api/v1/peliculas/'
from origin 'http://localhost:3000' has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested 
resource.

¿Qué significa el error y cómo lo solucionamos? Lo veremos en la próxima lección.