# React CORS error in netlify

**URL:** <https://answers.netlify.com/t/react-cors-error-in-netlify/49148>\
**Category:** Support\
**Tags:** deployment, create-react-app, cors\
**Created:** [December 24, 2021, 12:31pm UTC](https://answers.netlify.com/t/react-cors-error-in-netlify/49148 "2021-12-24T12:31:38Z")\
**Posts on this page:** 3\
**Page:** 2

<div class="post-metadata">

**Author:** ![serdargokhan](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/serdargokhan/32/32570_2.png) [@serdargokhan](https://answers.netlify.com/u/serdargokhan)\
**Post date:** [December 26, 2021, 9:22pm UTC](https://answers.netlify.com/t/react-cors-error-in-netlify/49148/21 "2021-12-26T21:22:34Z")

</div>

I directly texted my api-key into the fetch call and it worked. I changed it to .env format again and it is gone now 😄

---

<div class="post-metadata">

**Author:** ![luke](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/luke/32/39_2.png) [@luke](https://answers.netlify.com/u/luke)\
**Post date:** [December 27, 2021, 4:01am UTC](https://answers.netlify.com/t/react-cors-error-in-netlify/49148/22 "2021-12-27T04:01:58Z")

</div>

Hi, @serdargokhan. The environment variables only exist during the site build. Once the site build ends those environment variables no longer exist. If you reference them in client site javascript they will be undefined and therefore empty.

The workaround for this is to often to hard code them into javascript itself if this is an API key which can be shared publicly. However, if these are API keys that should remain private, there is a different workflow described in this support guide:

> [@\[Support Guide\] How do I keep my API keys/tokens safe using Netlify Functions?](https://answers.netlify.com/t/support-guide-how-do-i-keep-my-api-keys-tokens-safe-using-netlify-functions/293):
>
> Last reviewed by Netlify Support on Oct 2023 With Jamstack sites, using API keys/tokens to make API calls to other services is a frequent pattern. In some cases, you may want to hard code the keys in your html, when invoking those API calls - which on a service like Netlify means these keys are now public. Anyone can open their browser dev tools and view them, and of course this can lead to someone abusing this access. In some cases, this is fine. For instance, some types of Firebase and Faun…

Note, I don’t know anything about the API the app is consuming, but if this is related to financial services my best guess is that you will **not** want to expose that key. publicly

---

<div class="post-metadata">

**Author:** ![serdargokhan](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/serdargokhan/32/32570_2.png) [@serdargokhan](https://answers.netlify.com/u/serdargokhan)\
**Post date:** [December 27, 2021, 7:56am UTC](https://answers.netlify.com/t/react-cors-error-in-netlify/49148/23 "2021-12-27T07:56:44Z")

</div>

I think I will use netlify serverless functions. Thank you for all of your answers. Especially @coelmay. I am appreciate for your helps. I fixed CORS error 🙂

[Previous page](https://answers.netlify.com/t/react-cors-error-in-netlify/49148.md?page=1)