CORS Problem - react


I have a CORS problem with my React application.

When i call Keycloak to get a token it works fine, but when i call the same server to do a POST i get a CORS Error :
Access to XMLHttpRequest at ‘http://intssoapp01:8080/auth/realms/web/p-rest-admin-provider/webaccounts’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

I try with XMLHttpRequest and Axios and get the same error. I add Access-Control-Allow-Origin * in the header. There is the code :

const config = {
withCredentials: true,
headers: {
“Content-Type”: “application/json”,
“Access-Control-Allow-Origin”: “*”,
“Access-Control-Allow-Credentials”: “true”,
Authorization: "Bearer " + localStorage.getItem(“token”),
};, { dataPartner }, config).then(res => {
return res;

There is our server configuration

How can i resolve this problem ?

Thank you

Up please, I still have the problem

Did you add web-origins in the client scopes? Had a similar error after i removed them and it worked again after i put them back in.

Ya i’m still getting this error also … KEYCLOAK CORS just doesn’t work as intended. Please go back to the drawing board and fix this issue.

This is what i’m getting

I think we found a solution. We call a custom service that don’t manage OPTIONS. However then you do a POST request, the browser do a preflight request that wait for a header Allow-Origin in return. We need to code this in our custom service to return this header. I’ll let you know if it works.

Up. I’m using direct grant and no cors related headers are coming in the response even though I’ve configured allowed origins