CORS blocked #91
Comments
|
Hi @Danny-P, may you send more information about your app? This kind of error is usually related to some config error. I would need more information to help you like a sample project with the error and your configs on keycloak. Thanks! |
|
Same here. |
|
@ulise, this is related to a config in your keycloak server. You have to setup the Web Origins of your client 'https://ressource-url' on keycloak. |
|
@mauriciovigolo, I did. I tried with all settings. 'https://ressource-url', + and * |
|
@ulise, did you try, just for testing purposes, to leave only * in Web Origins field? |
|
@mauriciovigolo : Sorry, I´m out some days. So I cannot verify this right now. But - CORS-Headers with an '*' are not accepted with credentials. So setting the 'correct' Web Origins should do the job. I will give it a try soon. |
|
@mauriciovigolo now I am back and I have done some more tests and that is the configuration in keycloak:
|
|
Hi @Danny-P, I will take a look on this. Tks! |
|
@mauriciovigolo Have you seen anything wrong in my configuration? |
|
@Danny-P I am facing same issue, even after adding * in web origins on keycloak. Did you figure out the solution yet? I am using keycloak version 4.5 and my webapp is deployed in jetty 9.2 |
|
@akash19901990 unfortunantelly not. |
|
@Danny-P did you set your client credential in keycloak? if so, check your keycloak log, it should says something related to client secret. However the browser got the CORS error, instead of this specific error |
|
I had the same issue. I followed this blog: https://symbiotics.co.za/integrating-keycloak-with-an-angular-4-web-application-part-2/ and then change in the client config: |
Hope it helps :) |
|
after much frustration and trying out many options, this worked: on the client add the
|
|
Mhm, sadly I'm facing the same issue. Before i used the JSAdapter from Keycloak directly, but i found your lib and thought it would make things simpler. I'm wondering what you're doing different to my solution, because before i used your lib i did not get any CORS errors at all. |
|
Adding Client Secret in Keycloak config in environment.ts worked for me. See Pre-requisites (angular side) in https://medium.com/@sairamkrish/keycloak-integration-part-2-integration-with-angular-frontend-f2716c696a28. I just noticed that apart from CORS Policy error in web browser console, I was getting CODE_TO_TOKEN_ERROR from the Terminal. Hope this helps. |
|
Thanks @dcagnetta, It worked for me! |
|
@rodelsimangan I regenerate my client secret id and set it in my keycloak.json file for my js adapter, it worked. |
Maybe i don't understand your words but are you telling you put your client secret in your js client App? If this is the case, it's a big security issue, as JS client can't keep private a secret. You must use a Public client instead, that as no "secret". For the question, CORS is a problem on the server side, so in keycloak or in your backend. |
@scandinave, thanks for the comment. I don't know what I was trying to say at that time. But you are right, I don't use the secret key in my JS client in the end. I'm using public client in my solution now. |
|
I'm closing this issue as it is related to the keycloak server-side configuration. If any error persists, then feel free to contact me on Slack or reopen the issue. Thanks. |
|
hello @mauriciovigolo
|
|
further information if useful... |
|
HI All, I am using keycloak with nodejs But i am getting the CORS error when am accessing the API from Angular application even after setting the CORS at nodejs and keycloak web origins, the error is as follows Access to fetch at 'http://localhost:8080/auth/realms/ABC/protocol/openid-connect/auth?client_id=testclient&state=8c20862c-d8dc-457b-841a-a08a44e567f6&redirect_uri=http%3A%2F%2Flocalhost%3A8000%2Fcomplain%3Fauth_callback%3D1&scope=openid&response_type=code' (redirected from 'http://localhost:8000/complain') from origin 'http://localhost:8000' 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. please do the needfull, as its critical |
|
Use the |
|
Ditto, thanks @ypconstante. |
|
@vbiginner check your client in keycloak. Open the Scope tab and see if the Full Scope Allowed is checked. Otherwise you need to include on the same tab a Client Role for the "account" client named "view-profile" |
|
The both CORS and CODE_TO_TOKEN_ERROR problem is solved after install the keycloak.js (7.0.1). Thanks @ypconstante, |
|
Is it possible to authenticate the user without redirecting keycloak login page using keycloak-angular? |
@rackymuthu You'll need to use silent sso, see: #185 |
|
@jonkoops Thankyou for you response. Is there is any way to prevent the CORS Block issue and the same time to use the silentCheckSsoRedirectUri future? |
|
@rackymuthu The CORS issue as far as I can tell is due to a misconfiguration in Keycloak, I'd reccomend looking at a fix based on comments in this thread. |
|
@rackymuthu change the |
solved my problem, thanks |
|
I solve CORS issues using proxy in the angular proxy config write this code {
"/auth": {
"secure": false,
"changeOrigin": true,
"target": "https://your.auth.server"
}
}angular keycloak configuration: export function keycloakInit(keycloak: KeycloakService): () => Promise<any> {
return (): Promise<any> =>
keycloak.init({
config: {
url: 'https://your.auth.server/auth',
realm: 'realm_name',
clientId: 'client_name',
credentials: {
secret: 'awesome_secret'
}
},
initOptions: {
onLoad: 'login-required',
checkLoginIframe: false
},
enableBearerInterceptor: true
});
}the idea is that when the user goes into the authentication form, he goes directly to the keycloak website that is specified in the configuration. But requests for obtaining a token or account will be converted using the http interceptor, which in turn will go through a proxy server, thereby the browser will stop generating errors about CORS, since requests go directly to the URL from which the current application is running, like export function getCurrentHost(): string {
return window.location.href.split('/').reduce((_, __, ___, arr) => `${arr[0]}//${arr[2]}`, '');
}
const XHROpen = window.XMLHttpRequest.prototype.open;
window.XMLHttpRequest.prototype.open = function (method, url: string): void {
const realm = environment.keycloak.realm;
const tokenURL = `/auth/realms/${realm}/protocol/openid-connect/token`;
const accountURL = `/auth/realms/${realm}/account`;
const re = new RegExp(`${tokenURL}|${accountURL}`, 'g');
const match = url.match(re);
if (match?.length > 0) {
const currentHost = getCurrentHost();
arguments[1] = `${currentHost}${match[0]}`;
return XHROpen.apply(this, arguments);
}
return XHROpen.apply(this, arguments);
};Hope, this solution will help someone else |
How can I change this configuration to public and where? |
|
The access type configuration is in the client settings page https://www.keycloak.org/docs/latest/server_admin/#oidc-clients . |
I cannot change this to btw. I can login, but on user sign up it throws a cors error. And when I update from |
|
I don't remember what else I changed, but I remember having this same problem. |
|
I notice there is a lot of demand for a clear guide on how to configure a client on Keycloak so I have created an issue to document this in the future: #290 |
|
@infacto You have to change the one of 2 options below, I don't remember exactly but It's eith Then you'll be able to switch the option to |
|
Any resolves? This issue still persists in May 2021. I tried every solution suggested in this thread to no avail. I'm opened to suggestion. |
|
I tried everything in this thread, but the only thing that worked was updating my angular version from 9 to 10, then updating the keycloak-angular + keycloak-js libs according to the angular version -> https://www.npmjs.com/package/keycloak-angular |
|
WIth a 14 and 15 keycloak version installed, I had no issue with latest version of libraries. With a keycloak version 10.0.0 installed, I had to : 1- Use these libraries versions : 2- Set 3- Update Realm > Security Defenses > Headers > Content-Security-Policy : to add my dns in the list of frame-ancestors : And for sure no token in the keycloak configuration in the javascript code. |
|
I get cors policy error and status 401 when I run the My client has AccessType = public, Valid Redirect URIs = /* and WebOrigins = *. Does anyone know why I got this error on this specific request and how to solve it? |
|
Hello, the only way to achieve the authentication that I achieved with rest api openid-connect with keycloak was following this tutorial: https://javascript.tutorialink.com/keycloak-returns-cors-access-control-allow-origin-error/
|
|
Just ran into the problem and what helped me was going into my realm roles and for Client Roles - account I added the manage-account role. After that the CORS problem was gone. |
The only solution that helped me. Thanks. |
|
i have related issue: "@angular/core": "^16.1.6", version of installed keyclock server: 22.0.5 Access to XMLHttpRequest at 'http://localhost:8080/realms/my-app/account' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. |
and others
I have setup keycloak on another host as my angular application.
When I access the angular application I get redirected to the login page. After logging in the angular apps tries to load. But then I get CORS errors:
Cross-Origin Request blocked
Where do I need to configure CORS and which changes are necessay?
The text was updated successfully, but these errors were encountered: