title: How to fix “Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0” ERROR
body: <p>After hours of searching the web I have not found the solution to my problem. So I am building a full-stack CRUD app on React &amp; Java Spring Boot. So far I have been able to run the backend soring boot on localhost://8080. The problem appears when I run the frontend React on localhost://3000 -&gt; The React App keeps <a href="https://i.stack.imgur.com/0gKya.png" rel="noreferrer">loading</a> &amp; I see <strong>“Uncaught (in promise) SyntaxError: Unexpected token &lt; in JSON at position 0”</strong> the  error in the console.</p>
  <p>App.js:</p>
  <pre><code>import React, { Component } from 'react';
  import logo from './logo.svg';
  import './App.css';
  
  class App extends Component {
  state = {
  isLoading: true,
  groups: []
  };
  
  async componentDidMount() {
  const response = await fetch('/api/groups');
  const body = await response.json();
  this.setState({ groups: body, isLoading: false });
  } -&gt;
  </code></pre>
  <p>get syntax error here</p>
  <pre><code>render() {
  const {groups, isLoading} = this.state;
  
  if (isLoading) {
    return &lt;p&gt;Loading...&lt;/p&gt;;
  }
  
  return (
    &lt;div className=&quot;App&quot;&gt;
      &lt;header className=&quot;App-header&quot;&gt;
        &lt;img src={logo} className=&quot;App-logo&quot; alt=&quot;logo&quot; /&gt;
        &lt;div className=&quot;App-intro&quot;&gt;
          &lt;h2&gt;JUG List&lt;/h2&gt;
          {groups.map(group =&gt;
            &lt;div key={group.id}&gt;
              {group.name}
            &lt;/div&gt;
          )}
        &lt;/div&gt;
      &lt;/header&gt;
    &lt;/div&gt;
  );
  }
  }
  
  export default App;
  </code></pre>
  <p>package.json:</p>
  <pre><code>{
  &quot;name&quot;: &quot;app&quot;,
  &quot;version&quot;: &quot;0.1.0&quot;,
  &quot;private&quot;: true,
  &quot;dependencies&quot;: {
  &quot;@testing-library/jest-dom&quot;: &quot;^4.2.4&quot;,
  &quot;@testing-library/react&quot;: &quot;^9.3.2&quot;,
  &quot;@testing-library/user-event&quot;: &quot;^7.1.2&quot;,
  &quot;bootstrap&quot;: &quot;4.1.3&quot;,
  &quot;react&quot;: &quot;^16.14.0&quot;,
  &quot;react-cookie&quot;: &quot;3.0.4&quot;,
  &quot;react-dom&quot;: &quot;^16.14.0&quot;,
  &quot;react-router-dom&quot;: &quot;4.3.1&quot;,
  &quot;react-scripts&quot;: &quot;3.4.3&quot;,
  &quot;reactstrap&quot;: &quot;6.5.0&quot;
  },
  &quot;scripts&quot;: {
  &quot;start&quot;: &quot;react-scripts start&quot;,
  &quot;build&quot;: &quot;react-scripts build&quot;,
  &quot;test&quot;: &quot;react-scripts test&quot;,
  &quot;eject&quot;: &quot;react-scripts eject&quot;,
  &quot;proxy&quot;: &quot;http://localhost:8080&quot; //====&gt;PROBLEMATIC CODE(should be outside 
   //the script block)
  },
  &quot;eslintConfig&quot;: {
  &quot;extends&quot;: &quot;react-app&quot;
  },
  &quot;browserslist&quot;: {
  &quot;production&quot;: [
    &quot;&gt;0.2%&quot;,
    &quot;not dead&quot;,
    &quot;not op_mini all&quot;
  ],
  &quot;development&quot;: [
    &quot;last 1 chrome version&quot;,
    &quot;last 1 firefox version&quot;,
    &quot;last 1 safari version&quot;
   ]
  }
  </code></pre>
  <p>response.json:</p>
  <pre><code>{
  &quot;$id&quot;: &quot;response.json#&quot;,
  &quot;$schema&quot;: &quot;http://json-schema.org/draft-06/schema#&quot;,
  &quot;type&quot;: &quot;object&quot;,
  &quot;required&quot;: [
  &quot;status&quot;,
  &quot;statusText&quot;,
  &quot;httpVersion&quot;,
  &quot;cookies&quot;,
  &quot;headers&quot;,
  &quot;content&quot;,
  &quot;redirectURL&quot;,
  &quot;headersSize&quot;,
  &quot;bodySize&quot;
  ],
  &quot;properties&quot;: {
  &quot;status&quot;: {
    &quot;type&quot;: &quot;integer&quot;
  },
  &quot;statusText&quot;: {
    &quot;type&quot;: &quot;string&quot;
  },
  &quot;httpVersion&quot;: {
    &quot;type&quot;: &quot;string&quot;
  },
  &quot;cookies&quot;: {
    &quot;type&quot;: &quot;array&quot;,
    &quot;items&quot;: {
      &quot;$ref&quot;: &quot;cookie.json#&quot;
    }
  },
  &quot;headers&quot;: {
    &quot;type&quot;: &quot;array&quot;,
    &quot;items&quot;: {
      &quot;$ref&quot;: &quot;header.json#&quot;
    }
  },
  &quot;content&quot;: {
    &quot;$ref&quot;: &quot;content.json#&quot;
  },
  &quot;redirectURL&quot;: {
    &quot;type&quot;: &quot;string&quot;
  },
  &quot;headersSize&quot;: {
    &quot;type&quot;: &quot;integer&quot;
  },
  &quot;bodySize&quot;: {
    &quot;type&quot;: &quot;integer&quot;
  },
  &quot;comment&quot;: {
    &quot;type&quot;: &quot;string&quot;
  }
  }
  }
  </code></pre>
  <p>SOLUTION:</p>
  <pre><code>&quot;scripts&quot;: {
  &quot;start&quot;: &quot;react-scripts start&quot;,
  &quot;build&quot;: &quot;react-scripts build&quot;,
  &quot;test&quot;: &quot;react-scripts test&quot;,
  &quot;eject&quot;: &quot;react-scripts eject&quot;
  },
   &quot;proxy&quot;: &quot;http://localhost:8080&quot;
  </code></pre>
  <p><a href="https://github.com/Alex-Moh/jugtours/tree/master" rel="noreferrer">GitHub Repo</a></p>