# CORS issue with Angular Keycloak and Kong

**URL:** <https://discuss.konghq.com/t/cors-issue-with-angular-keycloak-and-kong/3989>\
**Category:** General\
**Tags:** kong-gateway\
**Created:** [July 15, 2019, 8:02pm UTC](https://discuss.konghq.com/t/cors-issue-with-angular-keycloak-and-kong/3989 "2019-07-15T20:02:32Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![enzov](https://avatars.discourse-cdn.com/v4/letter/e/df788c/32.png) [@enzov](https://discuss.konghq.com/u/enzov)\
**Post date:** [July 15, 2019, 8:02pm UTC](https://discuss.konghq.com/t/cors-issue-with-angular-keycloak-and-kong/3989/1 "2019-07-15T20:02:33Z")

</div>

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](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 ([GitHub - nokia/kong-oidc: OIDC plugin for Kong](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 ([keycloak-angular - npm](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 ([Securing APIs with Kong and Keycloak - Part 1](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\_ADDRESS/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 ([keycloak-angular - npm](https://www.npmjs.com/package/keycloak-angular#setup)), and the /token and the /account calls made by HttpClientInterceptor ([keycloak-angular - npm](https://www.npmjs.com/package/keycloak-angular#httpclient-interceptor)) and the AuthGuard ([keycloak-angular - npm](https://www.npmjs.com/package/keycloak-angular#authguard)).  
Problems come when the APP tries to access to the resource at KONG\_ADDRESS/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](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.