[keycloak-user] CORS issue with Angular Keycloak and Kong

Enzo Veltri enzo.veltri at gmail.com
Fri Jul 12 12:12:35 EDT 2019


Hello,
I'm stuck in some CORS problems with a Angular APP. First of all this is my
error:

"Access to XMLHttpRequest at
'KEYCLOAK_ADDRESS/auth/realms/kong-integration/protocol/openid-connect/auth?response_type=code&client_id=kong&state=51afb0a302eaade545d648ee234ac9c0&redirect_uri=http//KONG_ADDRESS/projects%2F&nonce=5828968bed9a3d5427bed214c482b7a1&scope=openid'
(redirected from 'http://KONG_ADDRESS/projects?username=c') from origin
'null' has been blocked by CORS policy: Response to preflight request
doesn't pass access control check: No 'Access-Control-Allow-Origin' header
is present on the requested resource."

Here is my architecture

I have as gateway KONG + OIDC Plugin (https://github.com/nokia/kong-oidc)
in a docker-machine located ad KONG_ADDRESS
An Identity Management as Keycloak that is located at KEYCLOAK_ADDRESS;
An Angular APP that uses the keycloak-angular library (
https://www.npmjs.com/package/keycloak-angular) located at localhost:4200
A Rest API, developed with Restlet, deployed on a tomcat on
TOMCAT_ADDRESS/projects

I've configured Kong to work with Keycloak using this tutorial (
https://www.jerney.io/secure-apis-kong-keycloak-1/) and everything works
fine till I'm interacting with the secured API using the browser or
Postman.
When I call the secured endpoint KONG/projects, I'm redirected to the login
page of Keycloak and then, after submitting the right credentials, I
receive the correct response.

Problems come when I'm trying to do everything using an Angular APP.

It looks like that everything is fine with the /auth and /authenticate
calls to KEYCLOAK_ADDRESS made by the initialization of the plugin (
https://www.npmjs.com/package/keycloak-angular#setup), and the /token and
the /account calls made by HttpClientInterceptor (
https://www.npmjs.com/package/keycloak-angular#httpclient-interceptor) and
the AuthGuard (https://www.npmjs.com/package/keycloak-angular#authguard).
Problems come when the APP try to access to the resource at KONG/projects.
It looks like there are a lot of jumps in the request: KONG redirects to
KEYCLOAK and KEYCLOAK send a 204 No Content.

I've added to the Keycloak client the web origins for KONG_ADDRESS and
http://localhost:4200 that is my Angular APP.

Do you have any idea about the problem? I think is something related to the
origin 'null' in the console log, or is something related to my setup.
Maybe I'm missing some details about the process.

-- 
Enzo


More information about the keycloak-user mailing list