Environmental Variables, API Key, Fetch problem

I’m creating a project using create-react-app and it appears that Netlify is having problems either reading my api_key from my .env file or I have a CORS issue. I npm installed ‘dotenv’ and created a .env file containing: REACT_APP_API_KEY=XXXXXXXXXXXXXXX

Then in my App.js file:

Then beneath created a variable to hold my api key:
const API_KEY = process.env.REACT_APP_PIXABAY_KEY;

In Netlify under Environmental Variables, I declared the variable (since my .env file was not uploaded to my Github account):


All of these steps seem correct and the project works locally. However, after deploying to Netlify I get this error in my console:

Access to fetch at ‘https://xxxxxxxx.com/api/?key=undefined&q=france&image_type=photo&orientation=horizontal&per_page=3’ from origin ‘https://xxxxxxxxxx.netlify.app’ 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.

— my key=undefined
— No ‘Access-Control-Allow-Origin’

Can’t figure out the problem or solution.

I think this post has the answers you seek!