Spring + React 获取数据

Question

i have a problem with fetch data from api exposed by spring. I want to fetch data by:

componentDidMount() {
this.setState({isLoading: true});

fetch('http://localhost:8080/api/tasks/')
.then(response => { return response.json() })
.then(results => this.setState({
  tasks: results,
  isLoading: false
}));

The spring api which return data:

    @CrossOrigin(origins = "http://localhost:3000")
  @GetMapping
  public List<Task> findTasksByUserId() {
    return taskService.findTasksBelongToUser(idProvider.getCurrentUserId());
  }

Returned JSON:

[
{
id: 1,
version: 0,
name: "Task1",
description: "description1",
priority: 1,
finished: true,
category: {
id: 1,
version: 0,
name: "Uncategorized",
user: {
id: 1,
version: 0,
login: "admin",
email: "admin@todo.pl",
enabled: true
}
},
user: {
id: 1,
version: 0,
login: "admin",
email: "admin@todo.pl",
enabled: true
},
position: 0
},
{
id: 2,
version: 0,
name: "Task2",
description: "description2",
priority: 4,
finished: true,
category: {
id: 1,
version: 0,
name: "Uncategorized",
user: {
id: 1,
version: 0,
login: "admin",
email: "admin@todo.pl",
enabled: true
}
},
user: {
id: 1,
version: 0,
login: "admin",
email: "admin@todo.pl",
enabled: true
},
position: 1
}]

And i got a error like this:

Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

I dont know what is wrong but maybe format of json is not correct, because it's start with the sign '['. I am a beginner in React so please about some hint and help. regards

Answer 1

fetch() returns a promise which gets resolved into an HTTP response of course, not the actual JSON. To extract the JSON body content from the response, we use the json() method.

Try adding two headers Content-Type and Accept to be equal to application/json .

fetch('http://localhost:8080/api/tasks/', {
      headers : { 
        'Content-Type': 'application/json',
        'Accept': 'application/json'
       }

    })
.then(response => { return response.json() })
.then(results => this.setState({
  tasks: results,
  isLoading: false
}));