Hi,
I’ve got this error when I am fetching data from the api
Access to fetch at ‘https://app.api.com/api/products/48’ from origin 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.
API call from my code
async function getProductdata(){
setIsLoading(true);
const secret = process.env.SECRET <--
const request = await fetch(`https://app.myapi.com/api/products/${data.productsCsv.id}`, {
headers: {
'Authorization': `Basic ${btoa(secret)}`,
'Accept': 'application/json'
}
}).then((request => request.json()))
.then(data => setProductData(data))
.catch(err=>console.log(err))
.finally(() => setIsLoading(false))
}
It does work fine in my local environment.
I have SECRET environment variable setup in netlify UI
but when the build is generated it’s not picking up.
I am not sure what I am missing here.
Hi @vishang,
I’m not sure how this is an environment variable question. This is a CORS issue. Does the target API have CORS enabled?
Also, a small tip (not related to the error): using await for fetch is redundant when using .then().
1 Like
Hey @hrishikesh, Thanks for taking time for this.
The env variable is working fine in my local development server. Using the similar code. So instead of using the env variable if I do build with an actual secret key it works fine. So that’s why i think it’s environment variable issue.
Thanks for you note again. I will look into it.
The way you’ve setup and environment variable is correct, added it in UI and trying to access it with process.env. So, I have no explanation as to why it would not. Could you try to log it and see if you can get it in your function log? Just add console.log(process.env.SECRET) and see what it returns.
In my local environment it does work fine with console.log(). it does return the value.
however, it returned undefined after build with netlify
check this
https://dev–bnbca.netlify.app/girls/ruffle-sleeve-collar-choli-with-floral-lehenga–green
Hi @vishang,
I’m not sure what the link you sent is supposed to show. it returns a not-found page.
@hrishikesh if you check the console of the page. where i have undefined which is coming from console.log(process.env.SECRET)
Just trying to show that what you’ve mentioned I have tried it but it’s not working
Nope, the above page logs nothing in the console. It’s the generic 404 page Netlify shows. Shows this:
i think it’s linked wrong.
Can you please copy and paste this URL in your browser
https://dev–bnbca.netlify.app/girls/ruffle-sleeve-collar-choli-with-floral-lehenga–green
Still the same. Chrome loads https://xn--devbnbca-un3d.netlify.app/girls/ruffle-sleeve-collar-choli-with-floral-lehenga%E2%80%93green for some reason, while Safari loads the correct URL but no logs in console. 
@hrishikesh for your ref. here is the screenshot.
Hi @vishang,
I see, you’re using environment variables in client-side code, not serverless functions. You’re also using Gatsby. So you need to define environment variables like this: Environment Variables | Gatsby
1 Like
Thanks you’re right. I’ve updated my variable name with gatsby prefixed and it works fine. so new variable called GATSBY_SECRET
