After successfully logging into Keycloak using the keycloak-js client, I encountered an error when attempting to make a fetch request. The error message received was:
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 being made is as follows:
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", "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ea9f998f98aa8f928b879a868fc4898587">[email protected]</a>")
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 as follows:
- Root URL:
http://localhost:8080 - Valid Redirect URIs:
http://localhost:8080 - Base URL:
/ - Admin URL: Empty
- Web Origins:
*// but also triedhttp://localhost:8080and +
My application is currently running on http://localhost:8080