Why does Keycloak complain about CORS even after configuring Web Origins?

Question

I would not like to rely on Keycloak login page at the moment, for that reason I have followed this example. I have configured my client as shown below:

Now this is how my request looks like:

  public getToken() {
   return this.http.post('http://localhost:8080/auth/realms/angular-test/protocol/openid-connect/token', {});
  }

It is this method that is raising the error Access to XMLHttpRequest at 'my token endpoint url' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I am not sure what is it that I am missing here. I have tried Web Origins to *, did not work too, even the +. I am still getting the same error.

NB: I am not using any adapter, I just want to make a call to Keycloak and get the token.

EDIT: Adding request headers:

POST /auth/realms/angular-test/protocol/openid-connect/token HTTP/1.1
Host: localhost:8080
Connection: keep-alive
Content-Length: 2
Accept: application/json
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.97 Safari/537.36
Content-Type: application/json
Origin: http://localhost:4200
Sec-Fetch-Site: same-site
Sec-Fetch-Mode: cors
Sec-Fetch-Dest: empty
Referer: http://localhost:4200/
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9

CORS is configured individually for each Keycloak realm. The URL `http://localhost:8080` is the URL for the Keycloak welcome page - outside any realm - so CORS configuration does not apply. — Codo, Jun 16 '20 at 12:57
@Codo , Don't we config cors on the client? I have done it on a client, cant see where to do it on the real. Check last edits, I am still getting the same error. — CN1002, Jun 16 '20 at 13:02
Yes, you are right. It's per client, which is even more fine-granular than realms. And your question now contains an URL that makes much more sense. Use the inspector of your browser to check the details of the failing request(s) and add the request's HTTP header to your question. And do you use the Angular proxy / have a `proxy.json` file? — Codo, Jun 16 '20 at 13:40
And check all related requests. Chances are you first get a redirect to another URL and the CORS issue is caused by the second URL. — Codo, Jun 16 '20 at 13:42
Just for good measure, try setting the `Root URL` back to a blank value, I've seen Keycloak behave weirdly with relative URLs — Allan, Jun 16 '20 at 13:54
And try enabling implicit flow as well, it should be the only scenario where Keycloak needs to set CORS actually (right?) — Allan, Jun 16 '20 at 13:56
Okay, I have removed the root url, enabled the implicit flow, still getting the same error. — CN1002, Jun 16 '20 at 13:59
What's the result of the request? Is it a redirect status code? I'm pretty sure you are trying to achieve something that cannot work. With a single page app like Angular you have only two options: *implict flow* or *authentication code flow with PKCE*. Both require that your redirect the user to the Keycloak UI. — Codo, Jun 16 '20 at 14:34
@Codo The result of the request is a CORS error as shown in the question. When I hit the same endpoint in Postman I am getting the token. I just want to do the same in Angular without using the adapter — CN1002, Jun 16 '20 at 15:45
What about the body of the request? In order to use the Resource Owner Password Credentials Grant type, you need to add `grant_type=password&username=johndoe&password=secret&client_id=yourclientid` in the body of your POST request. Currently, Keycloak has not way to know against which client it should authenticate your user. — Allan, Jun 16 '20 at 18:20
@Allan Good point. I have had those before, when I pruned them I was trying to see whats could be wrong. Now it seems that even triggering any post request, even to localhost:8080 raises the CORS error. Something like the "server container " that is holding keycloak is the cause of the error. — CN1002, Jun 16 '20 at 18:57
Out of curiosity, does the Postman response have the `Access-Control-Allow-Origin` header? — Allan, Jun 16 '20 at 20:59
And anyway, it is normal behaviour that a POST request to localhost:8080 triggers the same origin policy error as Keycloak is only adding the `Access-Control-Allow-Origin` headers when required. — Allan, Jun 16 '20 at 21:05

Why does Keycloak complain about CORS even after configuring Web Origins?

0 Answers0