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", "[email protected]")
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
http://localhost:8080
http://localhost:8080
/
*
// but I have also tried http://localhost:8080
and +My app is running on http://localhost:8080
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', '[email protected]');
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));