0

My .env (in root dir):

REACT_APP_ID = '123456';
REACT_APP_KEY = 'abcde123';

in app.js:

useEffect(() => {
    getRecipes();
  }, [query]);


const getRecipes = async () => {
    const response = await fetch(`https://api.edamam.com/search?q=${query}&app_id=${process.env.REACT_APP_ID}&app_key=${process.env.REACT_APP_KEY}`); //change the elements in the query to match ur ID and KEY + query
    const data = await response.json();
    console.log(data.hits);
    setRecipes(data.hits); 
  }

However, it doesn't work. Error thrown in console:

Access to fetch at 'https://api.edamam.com/search?q=paneer&app_id=***;&app_key=***;' from origin 'http://localhost:3000' 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.

Failed to load resource: net::ERR_FAILED

I've tried restarted the server by npm start but it doesn't work.

How to fix this?

ransom
  • 173
  • 1
  • 9
  • 1
    have you tried removing ; semicolon at the end. I think that is causing problems. – Sanidhya Oct 29 '22 at 06:46
  • 1
    Please have a look at [this answer](https://stackoverflow.com/a/71805329/17865804) and [this answer](https://stackoverflow.com/a/73963905/17865804) as well. – Chris Mar 12 '23 at 11:49

1 Answers1

1

The problem is not related to ReactJS here. The issue you are facing is about the CORS policy which is related to the networks and headers of the response. you should have something like this in your request header:

Access-Control-Allow-Origin:  http://127.0.0.1:3000

Also try to use fetch with credentials included, something like this:

fetch(https://api.edamam.com/search?q=${query}&app_id=${process.env.REACT_APP_ID}&app_key=${process.env.REACT_APP_KEY}`, {
  credentials: 'include'
});
Amirhossein Sefati
  • 656
  • 5
  • 12