# CORS Problem - react

**URL:** <https://forum.keycloak.org/t/cors-problem-react/6654>\
**Category:** Securing applications\
**Created:** [January 5, 2021, 12:08pm UTC](https://forum.keycloak.org/t/cors-problem-react/6654 "2021-01-05T12:08:24Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![aludwig](https://avatars.discourse-cdn.com/v4/letter/a/76d3ee/32.png) [@aludwig](https://forum.keycloak.org/u/aludwig)\
**Post date:** [January 5, 2021, 12:08pm UTC](https://forum.keycloak.org/t/cors-problem-react/6654/1 "2021-01-05T12:08:24Z")

</div>

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](http://intssoapp01:8080/auth/realms/web/p-rest-admin-provider/webaccounts)’ from origin ‘[http://localhost:3000](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](https://global.discourse-cdn.com/free1/uploads/keycloak/original/2X/0/0d010dd249277a870ca0cba38083df16b1cf783c.jpeg)

How can i resolve this problem ?

Thank you

---

<div class="post-metadata">

**Author:** ![aludwig](https://avatars.discourse-cdn.com/v4/letter/a/76d3ee/32.png) [@aludwig](https://forum.keycloak.org/u/aludwig)\
**Post date:** [January 7, 2021, 10:31am UTC](https://forum.keycloak.org/t/cors-problem-react/6654/2 "2021-01-07T10:31:03Z")

</div>

Up please, I still have the problem

---

<div class="post-metadata">

**Author:** ![R4nmaru](https://avatars.discourse-cdn.com/v4/letter/r/a4c791/32.png) [@R4nmaru](https://forum.keycloak.org/u/R4nmaru)\
**Post date:** [January 11, 2021, 9:15am UTC](https://forum.keycloak.org/t/cors-problem-react/6654/3 "2021-01-11T09:15:53Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Ziefin](https://avatars.discourse-cdn.com/v4/letter/z/f08c70/32.png) [@Ziefin](https://forum.keycloak.org/u/Ziefin)\
**Post date:** [January 12, 2021, 7:47pm UTC](https://forum.keycloak.org/t/cors-problem-react/6654/4 "2021-01-12T19:47:59Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Ziefin](https://avatars.discourse-cdn.com/v4/letter/z/f08c70/32.png) [@Ziefin](https://forum.keycloak.org/u/Ziefin)\
**Post date:** [January 12, 2021, 8:01pm UTC](https://forum.keycloak.org/t/cors-problem-react/6654/5 "2021-01-12T20:01:00Z")

</div>

This is what i’m getting

 ![image](https://global.discourse-cdn.com/free1/uploads/keycloak/original/2X/f/fbaef26bb9c3f9a584a18168bb49d3a621c1c4e4.png)

---

<div class="post-metadata">

**Author:** ![aludwig](https://avatars.discourse-cdn.com/v4/letter/a/76d3ee/32.png) [@aludwig](https://forum.keycloak.org/u/aludwig)\
**Post date:** [January 13, 2021, 8:07am UTC](https://forum.keycloak.org/t/cors-problem-react/6654/6 "2021-01-13T08:07:10Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![roastedcpu](https://yyz2.discourse-cdn.com/free1/user_avatar/forum.keycloak.org/roastedcpu/32/2096_2.png) [@roastedcpu](https://forum.keycloak.org/u/roastedcpu)\
**Post date:** [January 13, 2021, 3:14pm UTC](https://forum.keycloak.org/t/cors-problem-react/6654/7 "2021-01-13T15:14:35Z")

</div>

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