Kirby API in Client Side

Kirby 4 Solved ✔️
1

Hi, I’m using Kirby with Next.js and I have a problem with the API.

If I run this code in SSR, it works perfectly. But now I want to run this code in CSR. Whenever I run this code, I always get the error “Failed to fetch.” What could be the problem? I suspect it might be a CORS issue.

export const fetchDataApi = async ({url, userInfo, method, bodyData={}}) => {
    try {
        // await new Promise((resolve) => setTimeout(resolve, 2000))
      const encodedAuthString = Buffer.from(`${userInfo.authEmail}:${userInfo.authPassword}`).toString("base64");
      const headerAuthString = `Basic ${encodedAuthString}`;

      const response = await fetch(url, {
        method: method,
        headers: {
          Authorization: headerAuthString,
          "Content-Type": "application/json",
        },
        // cache: "no-store",
        ...(method === "POST" && {body: JSON.stringify(bodyData)})
      });

      const dataKirby = await response.json();
      console.log(dataKirby)
      return dataKirby;
    } catch (error) {
      console.log(error)
      
    }
  };
3

great. I solved the problem by changing the Kirby server configuration.