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.

Solution 1

Header is not correct. Valid header for JSON response:

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

Solution 2

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

Comments

[Janaka Dissanayake]

please try "Content-Type" : "text/plain"

[G H Prakash]

Did you got the answer?

[Admin]

Nope still returning html

[Muhammed Imran Hussain]

I am sorry. You modified your question later so I missed the term "Unexpected token".

[Brendan Metcalfe]

Accept: application/json is key

[FVBn]

If that happens, what should we do ?

[Ashir Mehmood]

That was exactly my case