Did you know malformed API url in create-react-app can cause CORS issue in Google Chrome when getting data from external api via fetch or axios.
I know this a strange issue. It is what i faced when using pixabay api in a create-react-app. I had stored api key in
.env file. I made a stupid mistake of adding a semicolon as in case of a variable declaration inside
It was really hard to debug the issue. I tried various CORS workarounds as mentioned in official docs including configuring proxy myself and adding http-proxy-middleware.
But still the issue wasn’t solved. I wasted nearly 2 hours on this bug. Finally when i was inspecting the console log, I found a semicolon where it shouldn’t be. It lead to an Aha! moment where i revisited the .env file and fixed the environment variable.
Finally I got rid of the issue and was able to get the data from the server.
So when using create-react-app, make sure your API url is formed correctly and your environment variables are correct to avoid bugs such as these.