CORS settings don't work

Securing applications
1

I have a following setup
JS React app (js-client) => Node JS Backend (api-client) => Keycloak auth server
For js-client I have set Web Origins to +, so it would work with all valid redirect urls.
api-client is Bearer only, so it doesn’t have cors settings.

Still, after I hit secured endpoint and login user in the browser, keycloak js adapter fails to get tokens, failing with:

Access to XMLHttpRequest at ‘…/protocol/openid-connect/token’ (redirected from ‘…/protocol/openid-connect/token’) from origin ‘http://localhost:8000’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

Localhost is also in the valid redirect urls.

Any ideas?

2

Make sure your Keycloak client has the following

  • redirectUris must contain your React url like http://localhost:3000/*
  • webOrigins must contain your React url like http://localhost:3000

The same goes for the client you use for your backend

3

I think I got what’s wrong.

I have Nginx proxy in front of my keycloak. Nginx redirects http to https, this changes the origin of the request and all CORS is getting removed by browsers.

What could be the correct solution here? It doesn’t seem possible to keep CORS headers when doing a redirect to https resource.
Is it somehow possible to force js adapter to request https rather than http right from the beginning?

4

Ok, problem solved =)
It was a wrong URL in my configuration.

5

Hi AAverin,

Can you give some details on how you setup your config ?

Thanks

6

Hello, excuse me for reopening the discussion after so many months but I have exactly the same problem, which configuration did you change please?

7

Hi,

If it can help someone, i did find a solution.

Browsers are very stricts about origins of ressources. So, if you want to tests Keycloak in local, the best solution i came up with, is to install nginx in local as reverse proxy. Keycloak and my nodeJS application are behind the proxy, so requests from the browser to ressources appear to be in the same domain.

This configuration is working. I hope my explaination are good :stuck_out_tongue:

Have a good day