Fetch -API returning HTML instead of JSON

Question

I have a Spring REST API which I've tested on Postman and it returns perfectly valid JSON. However when I call the same API on my front-end React Code it returns HTML. This is the function, I'm using to call the API,

export function run(engine, mediaId, owner, target, access){
  let url = engine + "/" + mediaId + "?id=" + owner + "&targetId=" + target + "&access=" + access;

  return fetch(full_url, { credentials: "include",
                           headers: {
                             "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
                          }})
    .then((response) => {

      return response.json();})
    .then((data) => {
        console.log(data);

    })
    .catch((error) => {
        console.log(error);
    });
}

I get a syntax error on this call Unexpected token < Thus when I check using response.text() I can see that the data returned is HTML and not JSON. What do I need to change in my front-end code for the API to return JSON.

Answer 1

Header is not correct. Valid header for JSON response:

headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  }

Answer 2

Sometimes Apis return html instead of json if you are not logged in, confirm that as well

Answer 3

I am using my university network and using fetch function, but instead I'm receiving the HTML hardcoded text for the login page of the university network panel. I don't know why this is happening. Solution: I grabbed the current URL from that HTML response and logged in into the network. Everything worked fine then.

Answer 4

Also double check you have selected the correct HTTP method in the dropdown box, next to the input bar on postman.