1

I using React and I am creating an application that integrates the backend as well. I am trying to fetch data from my backend. I have started both the frontend and the backend, and, using Thunderclient, checked that the endpoint is working fine. But whenever I am trying to fetch the same data using a fetch API call, I get the following error:

Image

Here is the code snippet for the same.

const getNotes = async () => {
    const response = await fetch(`${host}/api/notes/fetchall`, {
        method: "GET", 
        headers: {
            'Content-Type': 'application/json',
            "authtoken" : "xxxxxxxxxxxxxxxxxxxxxxxxxx"
        },
    });
    // ...
}

Can someone help me out with this?

CORS has been installed and used in index.js for the backend. I also tried using "mode": "CORS" but even that is not working for me.

user16217248
  • 3,119
  • 19
  • 19
  • 37
Jesmine
  • 9
  • 3
  • How is `getNotes` called? – Ramesh Reddy Apr 02 '23 at 16:39
  • It is getting called in a separate component "Notes", using "useEffect" hook – Jesmine Apr 03 '23 at 02:41
  • const context = useContext(NoteContext); const {notes,getNotes} = context; useEffect(()=> { getNotes() }) – Jesmine Apr 03 '23 at 02:41
  • Use the _Network_ panel in your dev-tools to inspect the actual request. What is the value of `host`? FYI your GET request has no request body so therefore does not need a content-type request header – Phil Apr 04 '23 at 04:00

0 Answers0