API Request 403 - Works with Axios but not with fetch?!

Kirby 3 Questions 🤔
1

I am currently trying to get my content out of Kirby for use with Vue on the frontend. I chose to use the route of Basic-Auth because it seems to be the most common approach. In addition I now use the KQL-Plugin which seems great!
So my first approach was to use only the plain old fetch-API to avoid pulling in a library (which still seems desirable although I’m not sure about that as Axios also offers better security etc…thoughts on that are also welcome). However all I was able to get are 403s!
After removing the “no-cors”-Header which limited the possible set of other request headers authentication now works while the return value remains “undefined”.

This is my code:

function fetchData() {
  const auth = `Basic ${window.btoa(
    'api-user-mail:api-pw'
  )}`;
  console.log(auth);

  fetch('https://podolski/api/query', {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json; charset=UTF-8',
      'Authorization': auth,
    },
    body: JSON.stringify({
      query: "page('portfolio').children",
      select: {
        title: true,
        text: 'page.text.kirbytext',
        slug: true,
        date: "page.date.toDate('d.m.Y')",
      },
    }),
  })
    .then((resp) => resp.json())
    .then((resp) => {
      const response = resp.data;
      console.dir(response);
    })
    .catch((error) => {
      console.log('Fetch error!');
    });
}

So then I thought “Maybe just do what Bastian did” and I used Axios in conjunction with the provided snippets on the KQL-Page as below:

async function fetchDataAxios()     {

  const api = "https://podolski/api/query";
  const auth = {
    username: "api-user-email",
    password: "api-pw"
  };

  const response = await axios.post(api, {
    query: "page('portfolio').children",
    select: {
      title: true,
      text: "page.text.kirbytext",
      slug: true,
      date: "page.date.toDate('d.m.Y')"
    }
  }, { auth });

  console.log(response);
}

Now - that works like a charm but leaves me a bit frustrated still as I really would like to know where the problem lies. Not only to maybe avoid using Axios but also to understand as this is not a point I think I should gloss over. Maybe some of you know whats going on. Thanks in advance!

2

Don’t know if this is the problem but accoding to MDN

Note that mode: "no-cors" only allows a limited set of headers in the request:

  • Accept
  • Accept-Language
  • Content-Language
  • Content-Type with a value of application/x-www-form-urlencoded , multipart/form-data , or text/plain
4

Hello @maltepodolski ,

Did you find a solution for your undefined issue? i’ve got the same problem with Fetch !

5

Finally found the solution (fetch data in Eleventy SSG using Kirby KQL plugin)

const fetch = require("node-fetch");
const btoa = require("btoa");

module.exports = async function() {

  let username = 'my_username'
  let password = 'my_password'
  const auth = `Basic ${btoa(`${username}:${password}`)}`

  const response = await fetch('https://my_url.com/api/query', {
    method: 'POST',
    mode: 'cors',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json; charset=UTF-8',
      'Authorization': auth,
    },
    body: JSON.stringify({
      query: "site.title",
    }),
  })

  // store the JSON response when promise resolves
  const resp = await response.json();
  console.log('response : ' + JSON.stringify(resp));

}
1 Like