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:
require(‘dotenv’).config()
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):
Key: API_KEY
Value: XXXXXXXXXXXX
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.