Search code examples
javascriptreactjsjsonfetchresponse

API responding with HTML document?

I created a brand new React app which uses "fetch" to retrieve some data from an API.

In my "App.js" file, within my App component, this can be seen.

 function getData() {
    fetch(`WORKINGURLWITHAPIKEY`)
        .then(res => res.json())
        .then(data => console.log(data))
  }
      
getData()

In the console I then receive the notorious Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0" error

I've tried everything including setting the headers, changing request methods, etc. I tested if the URL was valid and it was. I plugged it into the URL of the web browser and received back my desired data.

After doing a lot of research, I then looked at the actual response that I was receiving from my fetch request through Chrome DevTools and found out what was being sent back. The response was my React App's index.html template.

Any ideas on what could be happening?

Solution

  • Are you trying to reach a different domain? If you are, fetch would require the URL to start with http://, but your browser would not.