How to Fix Keycloak Cors Policy Error: No Access-control-allow-origin Header

1. Setup

• Keycloak is running on Server A.
• A client or backend application is running on Server B.
• Or both Keycloak and the client or backend application are running on the same server

2. Problem

When accessing the backend from the client application we get the error:

URL has been blocked by Cors policy: No "Access-Control-Allow-Origin" header is present on the requested resource.

3. Solution

1. Open your Keycloak client.
2. Under the Settings tab (selected by default), scroll at the bottom part.
3. Look for Web Origins and set it to "*" while testing.
4. Valid Redirect URIs can be set to "*" too.

Note that in a production environment, the values of Web Origins and Valid Redirect URIs must be changed. Web Origins is normally the client's address, don't forget to append "*" at the end of the URL. 

Sample values of Web Origins (let's say your client is developed using Angular):

• http://localhost:4200/*
• http://localhost:4200

Sample of Redirect URIs

• Could be *
• Or, any URL where you will redirect Keycloak after login

4. Know Issues

4.1 If you just migrated to version >7.0.1, make sure to set the client accessType=public, confidential is now deprecated and is causing CORS issue which is totally unrelated and is hard to debug :-)