Kirby 3's REST API / Fetch

Kirby 3
1

Hey!

Is there any way to consume Kirby’s API by requesting JSON data with Fetch API?
I want to create simple templates with Vue.js then use the requested data (generated with Kirby’s Panel) in my components, but i get 403 when i want to send a GET request.

const csrf = "<?= csrf() ?>";

fetch("http://localhost/api/site", {
    method: "GET",
    mode: "no-cors",
    auth: {
      email: EMAIL,
      password: PASSWORD
    },
    headers: {
      "X-CSRF": csrf
    }
  })
    .then(res => res.json())
    .then(res => {
      console.log(res);
    })
    .catch(error => {
      console.log(error);
    });

Any suggestion?
Thanks in advance!

2

Yes, you can use the API, but you need to authenticate, usually via sessions.

https://getkirby.com/docs/guide/api/introduction#authentication

You might want to check out this plugin: https://getkirby.com/plugins/robinscholz/better-rest

Therefore, it often makes more sense to provide your own custom endpoints via content representations, like in this Vue Starterkit: https://github.com/johannschopplich/kirby-vue3-starterkit.

3

Hey @texnixe, thanks for your quick response!
I already used authentication, the bit of code i posted is more or less the same as on the docs site (basicAuth and allowInsecure is set to true in config.php), but i get the following error:

SyntaxError: Unexpected end of input
at eval (App.vue?234e:30)

What am i missing?
Thanks for the resources, will check them out!