javascript - Error: SyntaxError: Unexpected end of JSON input when using fetch() - Stack Overflow

admin管理员组

文章数量:1344931

I am having a play with sending JSON between a Go API server and a React based front end. I am getting the following error:

Error: SyntaxError: Unexpected end of JSON input

It is saying this is occuring at line 25 which is

.then(response => response.json())

This is the related function:

postData() {
fetch('stuff/', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    name: 'Bob',
    age: 53,
  })
})
.then(response => response.json())
.catch(error => console.error('Error:', error))
.then(response => console.log('Success:', response));
}

After trying some troubleshooting i added the error catching to the function with the "success" and "error" outputs so it would at least stop popping the error page and added some console outputs on the API server to see if the data was being passed.

Apart from the error occurring, everything seems to be working as expected. The Go API server is receiving the json data and I am able to unmarshal it into a structure and write the data to console just fine so I know the data is being passed. No errors are being thrown on the Go side of the operation.

I'm having trouble working out what may be causing the error? Looking for some suggestions on how I may further troubleshoot this or resolve the error.

UPDATE: As Dale Suggested i have put .then(response => console.log(response)) into my code. I replaced the standard .then(response => response.json()) with this code. Below is a screenshot of the console from the chrome dev tools.

Also it may be worth noting that the error code does not pop up in this case. Could the error be with the server side go code? Below is the handler for the POST endpoint

func handlePostTest(w http.ResponseWriter, r *http.Request) {
body, err := ioutil.ReadAll(r.Body)
if err != nil {
    fmt.Print(err.Error())
}
var aPerson Person
json.Unmarshal(body, &aPerson)
fmt.Print(" ", aPerson.Name, " ", aPerson.Age)
}

I am having a play with sending JSON between a Go API server and a React based front end. I am getting the following error:

Error: SyntaxError: Unexpected end of JSON input

It is saying this is occuring at line 25 which is

.then(response => response.json())

This is the related function:

postData() {
fetch('stuff/', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    name: 'Bob',
    age: 53,
  })
})
.then(response => response.json())
.catch(error => console.error('Error:', error))
.then(response => console.log('Success:', response));
}

After trying some troubleshooting i added the error catching to the function with the "success" and "error" outputs so it would at least stop popping the error page and added some console outputs on the API server to see if the data was being passed.

Apart from the error occurring, everything seems to be working as expected. The Go API server is receiving the json data and I am able to unmarshal it into a structure and write the data to console just fine so I know the data is being passed. No errors are being thrown on the Go side of the operation.

I'm having trouble working out what may be causing the error? Looking for some suggestions on how I may further troubleshoot this or resolve the error.

UPDATE: As Dale Suggested i have put .then(response => console.log(response)) into my code. I replaced the standard .then(response => response.json()) with this code. Below is a screenshot of the console from the chrome dev tools.

Also it may be worth noting that the error code does not pop up in this case. Could the error be with the server side go code? Below is the handler for the POST endpoint

func handlePostTest(w http.ResponseWriter, r *http.Request) {
body, err := ioutil.ReadAll(r.Body)
if err != nil {
    fmt.Print(err.Error())
}
var aPerson Person
json.Unmarshal(body, &aPerson)
fmt.Print(" ", aPerson.Name, " ", aPerson.Age)
}

• javascript
• json
• reactjs

Share Improve this question Follow edited Apr 25, 2018 at 14:00 Ben asked Apr 23, 2018 at 6:03 BenBen 7911 gold badge11 silver badge66 bronze badges 15

• 1 The response is not a valid JSON. Test the response with Postman. – Roy Wang Commented Apr 23, 2018 at 6:06
• I'm not familiar with Postman but will try work it out to do a test. – Ben Commented Apr 23, 2018 at 6:25
• Can you show us the JSON object you are receiving? – Matan Bobi Commented Apr 23, 2018 at 6:26
• try .then(response => console.log(response)) and see what you're getting back – Dale King Commented Apr 23, 2018 at 7:11
• 2 @Ben if you are using fetch api and returning HTTP 200 from the server side then you should sent some content like ok , otherwise it it returns empty string and if you use .json() in it it results in error as it is not a valid json. If you are not sending any content send HTTP 204 from the server side (no content) – Niladri Commented Apr 25, 2018 at 13:00

 |  Show 10 more ments

1 Answer 1

Sorted by: Reset to default 6

From the error message and HTTP response it's evident that if you are using fetch api and returning HTTP 200 from the server side then you should sent some content like "OK" , otherwise it returns empty string and if you use .json() on top the response it results in error as it is not a valid json. If you are not sending any content send HTTP 204 from the server side (no content).

So for your case you should send some content from the server side.

本文标签： javascriptError SyntaxError Unexpected end of JSON input when using fetch()Stack Overflow