CORS Problem - react

Securing applications
1

Hi,

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”),
},
};
axios.post(url, { dataPartner }, config).then(res => {
console.log(res);
return res;
});

There is our server configuration

accfc0e5-d255-444b-ad30-5e0e0bb67bc1
accfc0e5-d255-444b-ad30-5e0e0bb67bc1800×659 36.7 KB

How can i resolve this problem ?

Thank you

2

Up please, I still have the problem

3

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.

4

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.

5

This is what i’m getting

image
image1368×73 26.7 KB

6

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.

7

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