28

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.

Improve this question
2
  • please try "Content-Type" : "text/plain" Commented Nov 15, 2016 at 5:43
  • Did you got the answer? Commented Oct 26, 2021 at 9:28

4 Answers 4

Reset to default
27

Header is not correct. Valid header for JSON response:

headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  }
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Nope still returning html
I am sorry. You modified your question later so I missed the term "Unexpected token".
Accept: application/json is key
For calling a FHIR server I also needed: 'Accept','application/json'
14

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

Improve this answer

3 Comments

If that happens, what should we do ?
That was exactly my case
@FVBn then you should login, pass bearer token to api etc
1

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

Improve this answer

Comments

1

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.

Improve this answer

1 Comment

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.