Keycloak returns CORS Access-Control-Allow-Origin error

Question

I am able to login to Keycloak using the keycloak-js client, however, when making a fetch request, I get the following error:

Access to fetch at 'https://xxxxxxxx.com/auth/realms/app_testing/protocol/openid-connect/token' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

The post request I am making is

var formData = new FormData()
formData.append("client_id", 'vue_blog_gui');
formData.append("grant_type", "password");
formData.append("client_secret", "705669d0-xxxx-xxxx-xxxx-4f4e52e3196b");
formData.append("scope", "openid");
formData.append("username", "user@example.com")
formData.append("password", "123")

fetch(
  'https://xxxxxxxx.com/auth/realms/app_testing/protocol/openid-connect/token',
  {
    method: 'POST',
    'Content-Type': 'application/x-www-form-urlencoded',
    data: formData
  }
)

The keycloak settings are

• Root URL: http://localhost:8080
• Valid Redirect URIs: http://localhost:8080
• Base URL: /
• Admin URL: Empty
• Web Origins: * // but I have also tried http://localhost:8080 and +

My app is running on http://localhost:8080

Answer 1

I managed to solve the problem. It was the format of the data I was sending to Keycloak. I need to URLEncode the FormData adding it to the body of the Fetch request. Also, was using data rather than body in the fetch request.

Anyway, I solved it by putting all the data into PostMan, getting it working in there and then taking the Auto Code generation that Postman provides to come up with this.

var myHeaders = new Headers();
myHeaders.append('Content-Type', 'application/x-www-form-urlencoded');

var urlencoded = new URLSearchParams();
urlencoded.append('client_id', 'vue_blog_gui');
urlencoded.append('username', 'me@example.com');
urlencoded.append('password', 'password');
urlencoded.append('grant_type', 'password');
urlencoded.append('scope', 'openid');
urlencoded.append('client_secret', '705669d0-xxxx-xxxx-xxxx-4f4e52e3196b');

var requestOptions = {
  method: 'POST',
  headers: myHeaders,
  body: urlencoded,
  redirect: 'follow',
};

fetch(
  'https://keycloak.server.example.com/auth/realms/app_testing/protocol/openid-connect/token',
  requestOptions
)
  .then((response) => response.text())
  .then((result) => console.log(result))
  .catch((error) => console.log('error', error));