title: Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 from SpringBoot API
body: <p>I am following this tutorial:</p>
  <p><a href="https://www.baeldung.com/spring-boot-react-crud" rel="nofollow noreferrer">https://www.baeldung.com/spring-boot-react-crud</a></p>
  <p>When I start the React server and try to fetch the json object(s) from REST API and display them in the map, the player data is not displayed despite following the tutorial.</p>
  <p>The only thing displayed is the word 'Players' but no player data is shown.</p>
  <p>In the console I am getting:</p>
  <pre><code>Uncaught (in promise) SyntaxError: Unexpected token &lt; in JSON at position 0
  </code></pre>
  <p>The API works correctly and when I visit http://localhost:8080/players I am displayed a json object of all the players data.</p>
  <pre><code>[{&quot;id&quot;:1,&quot;firstName&quot;:&quot;Fabiano&quot;,&quot;lastName&quot;:&quot;Caruana&quot;,&quot;email&quot;:&quot;fabcar@gmail.com&quot;,&quot;bio&quot;:&quot;Not quite WC.&quot;,&quot;password&quot;:&quot;BigFab72&quot;,&quot;rating&quot;:2750&quot;},
  {&quot;id&quot;:2,&quot;firstName&quot;:&quot;Biggie&quot;,&quot;lastName&quot;:&quot;Ta&quot;,&quot;email&quot;:&quot;bigt@gmail.com&quot;, &quot;bio&quot;:&quot;Not quite a WC.&quot;,&quot;password&quot;:&quot;BigT72&quot;,&quot;rating&quot;:2750}]
  </code></pre>
  <p>app.js:</p>
  <pre><code>import React, {Component} from 'react';
  
  class App extends Component {
    state = {
      players: []
    };
  
    async componentDidMount() {
      const response = await fetch('/players');
      const body = await response.json();
      this.setState({players: body});
    }
  
  
    render() {
      const {players} = this.state;
      return (
          &lt;div className=&quot;App&quot;&gt;
            &lt;header className=&quot;App-header&quot;&gt;
              &lt;div className=&quot;App-intro&quot;&gt;
                &lt;h2&gt;Players&lt;/h2&gt;
                {players.map(player =&gt;
                    &lt;div key={player.id}&gt;
                      {player.firstName} ({player.email})
                    &lt;/div&gt;
                )}
              &lt;/div&gt;
            &lt;/header&gt;
          &lt;/div&gt;
      );
    }
  }
  export default App;
  </code></pre>
  <p>In my package.json file I have:</p>
  <pre><code>&quot;proxy&quot;: &quot;http://localhost:8080&quot;
  </code></pre>
  <p>And my SpringBoot REST application runs on 8080.</p>
  <p>When I did console.log(response.text()):</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
    &lt;head&gt;
      &lt;meta charset=&quot;utf-8&quot; /&gt;
      &lt;link rel=&quot;icon&quot; href=&quot;/favicon.ico&quot; /&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot; /&gt;
      &lt;meta name=&quot;theme-color&quot; content=&quot;#000000&quot; /&gt;
      &lt;meta
        name=&quot;description&quot;
        content=&quot;Web site created using create-react-app&quot;
      /&gt;
      &lt;link rel=&quot;apple-touch-icon&quot; href=&quot;/logo192.png&quot; /&gt;
      &lt;!--
        manifest.json provides metadata used when your web app is installed on a
        user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
      --&gt;
      &lt;link rel=&quot;manifest&quot; href=&quot;/manifest.json&quot; /&gt;
      &lt;!--
        Notice the use of  in the tags above.
        It will be replaced with the URL of the `public` folder during the build.
        Only files inside the `public` folder can be referenced from the HTML.
  
        Unlike &quot;/favicon.ico&quot; or &quot;favicon.ico&quot;, &quot;/favicon.ico&quot; will
        work correctly both with client-side routing and a non-root public URL.
        Learn how to configure a non-root public URL by running `npm run build`.
      --&gt;
      &lt;title&gt;React App&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;noscript&gt;You need to enable JavaScript to run this app.&lt;/noscript&gt;
      &lt;div id=&quot;root&quot;&gt;&lt;/div&gt;
      &lt;!--
        This HTML file is a template.
        If you open it directly in the browser, you will see an empty page.
  
        You can add webfonts, meta tags, or analytics to this file.
        The build step will place the bundled scripts into the &lt;body&gt; tag.
  
        To begin the development, run `npm start` or `yarn start`.
        To create a production bundle, use `npm run build` or `yarn build`.
      --&gt;
    &lt;script src=&quot;/static/js/bundle.js&quot;&gt;&lt;/script&gt;&lt;script src=&quot;/static/js/vendors~main.chunk.js&quot;&gt;&lt;/script&gt;&lt;script src=&quot;/static/js/main.chunk.js&quot;&gt;&lt;/script&gt;&lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>Controller:</p>
  <pre><code>@RestController
  @RequestMapping(&quot;/players&quot;)
  public class PlayersController {
  
      private final PlayerRepository playerRepository;
  
      public PlayersController(PlayerRepository playerRepository) {
          this.playerRepository = playerRepository;
      }
  
      @GetMapping
      public List&lt;Player&gt; getPlayers() {
          return playerRepository.findAll();
      }
  
      @GetMapping(&quot;/{id}&quot;)
      public Player getPlayer(@PathVariable Long id) {
          return playerRepository.findById(id).orElseThrow(RuntimeException::new);
      }
  
      @PostMapping()
      public ResponseEntity createPlayer(@RequestBody Player player) throws URISyntaxException {
          Player savedPlayer = playerRepository.save(player);
          return ResponseEntity.created(new URI(&quot;/players/&quot; + savedPlayer.getId())).body(savedPlayer);
      }
  
      @PutMapping(&quot;/{id}&quot;)
      public ResponseEntity updatePlayer(@PathVariable Long id, @RequestBody Player player) {
          Player currentPlayer = playerRepository.findById(id).orElseThrow(RuntimeException::new);
          currentPlayer.setFirstName(player.getFirstName());
          currentPlayer.setEmail(player.getEmail());
          currentPlayer = playerRepository.save(player);
  
          return ResponseEntity.ok(currentPlayer);
      }
  
      @DeleteMapping(&quot;/{id}&quot;)
      public ResponseEntity deletePlayer(@PathVariable Long id) {
          playerRepository.deleteById(id);
          return ResponseEntity.ok().build();
      }
  }
  </code></pre>
  <p>Thanks for help!</p>