Fix CORS problem - No Access Control Allow Origin header is present on the requested resource

Configuring the server
1

hello there,

i am using keycloak 5.0.0, on a setup with spring security backend and an angular frontend.
all has been autowired and setup by jhipster to work out of the box.
however…
when a user is not yet authenticated and the frontend makes a call to a secured “account” endpoint to validate if the used is authenticated or not, this call triggers a redirect to keycloak to login. keycloak then sends a response with the url to login.
unfortunatelly this response does not include the CORS Access Control Allow Origin and therefore is blocked by the browser preventing the redirect. (see attached image)

On my keycloak instance i have configured the Web Origins: *
And valid redirect urls: *

The client is using the confidential access type with a client secret

Thank you for any ideas you may have

image
image1923×48 9.86 KB

2

Hello,

I was having similar problem with springboot application and I solved it by adding keycloak.cors=true to my application.properties.

For more info you can look at our CORS app in testsuite: https://github.com/keycloak/keycloak/blob/master/testsuite/integration-arquillian/test-apps/cors/database-service/src/main/webapp/WEB-INF/keycloak.json#L9

Michal

3

hello @mhajas
thank you for looking at this.

are you saying that i should place a keycloak property (keycloak.cors=true) to the properties file of my app backend? enabling cors should not be something to do at the keycloak side?
as far as i can observe, it’s the response from keycloak that is missing the access control allow origin headers

i have attached the oauth2 configuration part of my application.yml (jhipster backend)
are you able to recognize this structure and sugest a missing property?
bla

4

Well I have never worked with jhipster, so I don’t recognize this. To me it looks like you are not using keycloak provided adapter, but something provided by jhipster, are you?

If I remember correctly my issue looked very similar to yours and it was solved by allowing cors for backend application. My investigation of that problem was that when frontend app send preflight OPTIONS request to backend, the request was redirected to keycloak, however it should be served by backend server saying: “yes, I am allowing frontend app origin to access me”.

If you would be using keycloak adapter it will solve this issue when you add enable-cors: true for keycloak.json file or keycloak.cors = true for application.properties, otherwise you probably need to do it yourself. After quick search I find something like this: https://stackoverflow.com/questions/51730409/jhipster-cors-enable it might be worth trying.

5

hello @mhajas

thank you for your help,
i will try to implement your sugestions

6

You are welcome. Please let us know whether you were able to solve you issue and what solution worked at the end.

7

hello there,

after further investigation on the issue, i can confirm that the situation described by @mhajas is happening. the preflight request is being redirected and it should be served by the backend.
i have confirmed that on this issue thread of the jhipster repo: https://github.com/jhipster/generator-jhipster/issues/10642
if anyone has the same problem regarding the interconnection of keycloak and jhipster, then you can continue by following the above conversation. jhipster team is currently analyzing the situation in order to provide a fix.

regards,

Tiago

8

After trying to place keycloak-gatekeeper in front of my node.js web app, I’m now suffering from what looks like the same cors issue (keycloak oidc was already successfully integrated into my app).

I’m currently running the jboss/keycloak:7.0.1 docker container, but I can’t find either the application.properties or keycloak.json file. Should one of them be in the container somewhere?

Many thanks,
Chris