In a Vue app, I am trying to make an authenticated call (basic auth via axios) to the Kirby API which seems to always make a request with the OPTIONS method first. This fails with a 404 as there doesn’t seem to be an OPTIONS method on the API routes?
This still doesn’t work and always results in a 404. Calling the endpoint directly through Postman or the browser works fine, for example, in the example of the starterkit, /api/pages/notes.
One more learning… additionally, if you need to query languages from the API, make sure to allow X-Language, Accept-Language in the Access-Control-Allow-Headers:
// Access-Control headers are received during OPTIONS requests
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
header("HTTP/1.1 200 OK");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
header("Access-Control-Allow-Headers: Content-type, Authorization, Origin, X-Requested-With, X-Language, Accept-Language'");
}
I’m also in a similar situation. Working with a Vue3 + Vite app and Axios / Kirby KQL Plugin. Everything works locally, e.g. when I serve kirby from localhost:8888 and the frontend from localhost:3000.
But as soon as I place kirby on a remote server, I can’t access the API from localhost:3000.
In Chrome I get the following error:
Access to XMLHttpRequest at 'https://mydomain.com/api/query' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
And in Firefox
OPTIONS https://mydomain.com/api/query
CORS Preflight Did Not Succeed
404 Page not found
I tried adding the following to my .htaccess:
<IfModule mod_rewrite.c>
RewriteEngine On
# Preflight OPTIONS requests handling
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]
</IfModule>
Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Headers "Accept,Authorization,Content-Type,Origin,X-Auth-Token"
Header always set Access-Control-Allow-Methods "PUT,POST,GET,OPTIONS,ORIGIN"
SetEnvIf Origin "^http(s)?://(.+\.)?(localhost)(:[0-9]+)?$" origin_is=$0
Header always set Access-Control-Allow-Origin %{origin_is}e env=origin_is
Header always set Access-Control-Allow-Credentials "true"
And as suggested in the comments above in config.php:
header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Max-Age: 86400'); // cache for 1 day
// Access-Control headers are received during OPTIONS requests
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
header("HTTP/1.1 200 OK");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
header("Access-Control-Allow-Headers: Content-type, Authorization, Origin, X-Requested-With'");
}
I’m always ending up with the same errors.
Would appreciate any help!
I tried various approaches and are still stuck. I tried a brand new plain kit installation with KQL, different .htaccess settings and various ways to call the api (axios, fetch, postman). And the result was always the same CORS issue. I called my hoster and he tried different server settings as well.
I really loved Kirby as a backend but must say there are to many unsolved issues when working headless and the documentation in this regard has too many gaps. Since it’s no option for me to use Kirby in a native PHP way, I don’t see any other option as dropping Kirby from my tech stack for now.
Thanks for your workarounds. Sadly I haven’t found a solution and ended up doing the project with a different cms.
It’s weird since I used the exact same approach a couple of month’s ago and it did work. So maybe it’s a actual bug that got introduced either in Kirby or the plugin in the last months.
and hopefully the official docs are updated with more info about the API