14

I get this error every time I try to use the POST method in my API.

SyntaxError: Unexpected end of JSON input at fetch.then.response

When I use the GET method I get the data normally. This is the code:

const teste = () => {
fetch("myURL/test", {
    method: "POST",
    headers: {
        "Content-Type": "application/json"
    },
    body: JSON.stringify({
        id: 1,
        name: "Teste",
        amount: 1,
        value: 3
    })
})
.then(response => response.json()) //Here is the error
.then(data => {
    console.log(data);
})
.catch((err)=>console.log(err))}

Can someone help me?

EDIT:
I just add this line to see the log:

.then(response => console.log(response))

Here is what I got:

Response {
type: "cors",
url: "myURL/test",
redirected: false,
status: 201,
ok: true,
…}
body: (...)
bodyUsed: false
headers: Headers {}
ok: true
redirected: false
status: 201
statusText: ""
type: "cors"
: "myURL/test"
__proto__: Response
Improve this question
6
  • Well what does the response actually look like? Commented Mar 3, 2019 at 18:15
  • @Pointy I just get this error: SyntaxError: Unexpected end of JSON input at fetch.then.response Commented Mar 3, 2019 at 18:18
  • 1
    About @pointy's comment, you can look what the response looks like by replacing then(resp => resp.json()) by then(resp => resp.text()).then(console.log) and edit your answer by including the logged text Commented Mar 3, 2019 at 18:18
  • Or simply look in the browser developer tools "Network" tab Commented Mar 3, 2019 at 18:23
  • @NinoFiliu I did what you said. Commented Mar 3, 2019 at 18:27

4 Answers 4

Reset to default
18

It means that the page fetched at myURL/test does not responds with JSON content, or with malformed JSON content. This is not an error in your script, which is fine, this is an error with your server, that is not serving JSON content at myURL/test.

Also, note that servers might not respond similarly to GET requests and POST request for the same URL! If you fetch valid JSON from a GET request but, as you described, failed to fetch valid JSON from a POST request, your server might be serving different content depending on the request type. Investigate that.

Debug tips

  • Replace then(resp => resp.json()) by then(resp => resp.text()).then(console.log) to see what the served content looks like
  • Use Postman to simulate API calls, and see what the served content looks like, with more details
  • Examine the response with the developer tools:
    1. In Chrome
    2. Open the console (F12)
    3. Go to the network tab
    4. Click on the file server by myURL/test
    5. Click on response: that will be the text content. It shoud be properly formatted JSON.
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

The browser developer tools will show the complete text of the HTTP request and response.
Indeed! I'll edit my answer to include this. I never really used the developers tools as a beginner so I only thought about suggesting script-only tips.
@NinoFiliu When I use method GET this is what I get: [ { "id": 1, "name": "Coca-cola", "amount": 1, "value": 2.5 } ]
Try posting body:{ data:{ I'd:1, name:"test#"}}
@RicardoSanches you're fetching with POST but get valid JSON only with GET, so your server serves different content based on POST/GET. See the added paragraph in my answer.
1

(for people coming later but dealing with this problem)

The problem is most probably server error or invalid URL but you can't see it because all examples on internet how to work with fetch are missing one important part - the server or network failure.

I think the correct way how to deal with fetch is test response if contains errors before conversion to json.

Check the part of the first then in example where it.ok is tested:

async function fetchData() {
    return await fetch('https://your-server.com/some-NOt-existing-url/')
        .then(it => {
            if (!it.ok) {
                throw `Server error: [${it.status}] [${it.statusText}] [${it.url}]`;
            }
            return it.json();
        })
        .then(receivedJson => {
            // your code with json here...
        })
        .catch(err => {
            console.debug("Error in fetch", err);
            setErrors(err)
        });
}

(note: it is just name convention borrowed from Kotlin, it makes JavaScript code shorter. It is alias for anything on left side of expression so in this case for response)

Improve this answer

Comments

0

Basically GET method does not send your body object to the server in which you get the response. Only the POST action will send your body object to the server.

I assume that the object you wish to send is the problem. Either the server which you are trying to connect does not expects the body object as string or you should make sure you have parsed the JSON properly before processing.

Improve this answer

1 Comment

I think you'r right. I'm using SwaggerHub to create the API and I thnk this could be the problem.
0

Looks like the API you're calling, doesn't have a response body on this particular POST. Then when you call response.json() (converting response.body to json) it runs into error. Or maybe the response is body is not a valid json body.

If you wanna handle this error more fashion way you could go like this: 

tryGetJson = async (resp) => {
    return new Promise((resolve) => {
      if (resp) {
        resp.json().then(json => resolve(json)).catch(() => resolve(null))
      } else {
        resolve(null)
      }
    })
  }

https://github.com/github/fetch/issues/268#issuecomment-399497478

Improve this answer

Comments

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.