Been trying to figure this on and off the past two weeks and all day today. I’m running keycloak 19.0.1 (powered by quarkus), with the official keycloak-js. I’ve pasted all my files below, but for the life of my I can not figure out why keycloak is not adding the correct CORS headers. I’ve pasted the firefox cors block message below:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://<publichostname>/realms/<realm>/account. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
In the client config it already has both https://127.0.0.1:3000 and the public hostname of the website in the web origins with the correct redirect URI’s. I’ve also tried both ‘*’ & ‘+’, in conjunction, independently etc. I've also tried to do this to the account client (because that appears to be where the request goes first). Regardless, all requests (either from localhost or an actual deployment of the website) run into the cors error.
However, even weirder - the OPTIONS request which gets sent first responds back with the correct access-control-allow-origin header. However, the GET request immediately after does not have it added.
There’s only two things between the end-user and the keycloak server - NGINX proxy and Cloudflare. For debugging - I put Cloudflare in development mode (so it caches nothing), and NGINX is configured with nothing more then SSL, proxypass and to serve 403 on /metrics & /health. (no setting of headers/etc).
I've pasted as much relevant code/config below - but if something else will help - please let me know.
Services (just the start snippet)
ExecStart=/opt/keycloak/bin/kc.sh —config-file=/etc/keycloak/keycloak.conf start
keycloak.conf
db=postgres
db-username=<redacted>
db-password=<redacted>
db-url=jdbc:postgresql://<redacted>/keycloak_auth
health-enabled=true
metrics-enabled=true
proxy=edge
hostname=<publichostname>
hostname-admin=<publichostname>
hostname-strict-backchannel=true
http-host=<internal ip>
log=console,file
log-console-color=true
log-file=/var/log/keycloak.log
log-level=info
keycloak.log nothing relevant (just startup)
auth.ts
import { browser } from '$app/env';
import Keycloak from 'keycloak-js';
export let keycloak;
if (browser) {
keycloak = new Keycloak({
url: 'https://<publichostname>/‘,
realm: ‘<redacted>,
clientId: ‘<redacted>’,
});
await keycloak
.init({
enableLogging: true
})
.then(function (auth) {
console.log('Keycloak Initalised ' + auth);
})
.catch(function (error) {
console.log('Keycloak Failed to Init: ' + error);
});
} else {
console.log('Cannot auth in non-browser environment.');
}
index.svelte
// Auth
async function auth() {
if (browser) {
const auth = await import('$lib/components/auth/auth');
auth.keycloak.login();
} else {
console.log('Cannot auth in non-browser environment.');
}
}
async function logout() {
if (browser) {
const auth = await import('$lib/components/auth/auth');
auth.keycloak.logout();
} else {
console.log('Cannot auth in non-browser environment.');
}
}
async function isLoggedIn() {
if (browser) {
const auth = await import('$lib/components/auth/auth');
console.log(await auth.keycloak.loadUserProfile());
return await auth.keycloak.authenticated;
} else {
console.log('Cannot auth in non-browser environment.');
return false;
}
}
(and then a button which displays either logout or login buttons based on a call to isLoggedIn - which is where the cors errors start coming in).
I've attempted to look at and use: https://keycloak.discourse.group/t/access-control-allow-origin-header-missing/328/28
Keycloak angular No 'Access-Control-Allow-Origin' header is present
KeyCloak : No 'Access-Control-Allow-Origin' header is present on the requested resource
How to fix cors error at my keycloak to make it work?
As well as various sites/pages that don't look to be it - to see if I can get any closer to the error. However, most end up being solved by adding the domain into the web origins - which I've already done.
I know the likelihood is I've missed something incredibly simple - however, I've been pouring over this for ages - and probably need a pair of fresh eyes to look over it.
