es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Datos solicitados desde la API de Strapi desde el Frontend de Next.js no muestran los datos.

Datos solicitados desde la API de Strapi desde el Frontend de Next.js no muestran los datos.

29 Jul, 2023 Programación

Hola, estaba intentando crear un clon de TikTok, pero me encontré con un problema de que no puedo mostrar los datos de mi backend de Strapi en mi frontend de Next.js y quería informarte que permití solicitudes públicas al código de la API que se muestra a continuación:

import axios from "axios";

const Post = ({ posts, error }) => {
  if (error) {
    return <div>Ocurrió un error: {error.message}</div>;
  }
  return (
    <ul>
      {posts.length > 0 &&
        posts.map((post) => <li key="{post.id}">{post.title}</li>)}
    </ul>
  );
};

Post.getInitialProps = async (ctx) => {
  try {
    const res = await axios.get("http://localhost:1337/api/posts");
    const posts = res.data;
    return { posts };
  } catch (error) {
    return { error };
  }
};

export default Post;
Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Hola,

    Según el código que has proporcionado, parece que estás intentando mostrar datos de tu backend de Strapi en tu frontend de Next.js. También mencionaste que permitiste solicitudes públicas a la API.

    Aquí hay algunas cosas que puedes verificar para solucionar el problema:

    • Asegúrate de que el punto final de la API (`http://localhost:1337/api/posts`) es correcto y que puedes acceder a él a través de tu navegador web o utilizando una herramienta como Postman.
    • Verifica que tengas datos en tu backend de Strapi y que tu API esté devolviendo los datos correctos. Puedes hacer esto registrando los datos en la consola o revisando la respuesta en Postman.
    • Verifica si hay algún error de CORS (Compartir recursos de origen cruzado) en la consola de tu navegador. CORS es una función de seguridad implementada por los navegadores que restringe las páginas web para realizar solicitudes a un dominio diferente. Si este es el caso, es posible que necesites configurar la configuración de CORS en tu backend de Strapi.
    • Asegúrate de haber instalado las dependencias necesarias para usar Axios en tu proyecto de Next.js. Puedes hacer esto ejecutando npm install axios o yarn add axios dependiendo de tu gestor de paquetes.

    ¡Espero que esto te ayude! Avísame si tienes alguna otra pregunta.

Comments are closed.