title: .NET Core 2.1 using React template - Unexpected token < json at position 0 while using "fetch()"
body: <p>I'm trying to setup a basic CRUD application using .NET Core 2.1 with the React template. I have a SQL Server DB with 2 tables : <code>tblEmployee</code>, <code>tblCities</code>.</p>
  
  <p>I've created my models using <code>Scaffold-DbContext</code> successfully. And I added my connection string to <code>appsettings.json</code>.</p>
  
  <p>In my Models folder, I added a <code>DataAccessLayer.cs</code> (class) with some functions to access my context.</p>
  
  <p>Example :</p>
  
  <pre class="lang-cs prettyprint-override"><code>private readonly CoreReactAppContext db = new CoreReactAppContext();
  
  public IEnumerable&lt;TblEmployee&gt; GetAllEmployees()
  {
      try
      {
          var employees = db.TblEmployee.ToList();
          return employees;
      }
      catch
      {
          throw;
      }
  }
  </code></pre>
  
  <p>From that, I have an <code>EmployeeController.cs</code> which I use to return my data.</p>
  
  <p>Example :</p>
  
  <pre class="lang-cs prettyprint-override"><code>DataAccessLayer objemployee = new DataAccessLayer();
  
  [HttpGet]
  [Route("api/Employee/Index")]
  public JsonResult Index()
  {
      return new JsonResult(objemployee.GetAllEmployees());
  }
  </code></pre>
  
  <p>So this is mainly my API for my data.</p>
  
  <p>For my front-end code, I have a <code>FetchEmployee.js</code> which get all my employees and render them in a simple html table.</p>
  
  <p>Example :</p>
  
  <pre class="lang-js prettyprint-override"><code>export class FetchEmployee extends Component {
      displayName = FetchEmployee.name
  
      constructor(props) {
          super(props);
          this.state = { empList: [], loading: true };
  
          fetch('api/Employee/Index', {
                  method: 'get',
                  headers: { 'Content-Type': 'application/json' }
              })
              .then(response =&gt; {
                  response.json();
              })
              .then(data =&gt; {
                  this.setState({ empList: data, loading: false });
              }).catch(function (error) {
                  console.log('Something happened...', error);
              });
  
          this.handleDelete = this.handleDelete.bind(this);
          this.handleEdit = this.handleEdit.bind(this);
      }
  
      render() {
          let contents = this.state.loading
              ? &lt;p&gt;&lt;em&gt;Loading...&lt;/em&gt;&lt;/p&gt;
              : FetchEmployee.renderEmployeeTable(this.state.empList);
  
          return (
              &lt;div&gt;
                  &lt;h1&gt;Employee Data&lt;/h1&gt;
                  &lt;p&gt;This component demonstrates fetching &lt;b&gt;Employee Data&lt;/b&gt; from the server&lt;/p&gt;
                  &lt;p&gt;
                      &lt;Link to="/addemployee"&gt;Create New&lt;/Link&gt;
                  &lt;/p&gt;
                  {contents}
              &lt;/div&gt;    
          );
      }
  
      //Handle the delete request from the user for an employee
      handleDelete(id) {
          fetch('api/Employee/Delete/' + id, {
              method: 'delete'
          }).then(data =&gt; {
              this.setState(
                  {
                      empList: this.state.empList.filter((rec) =&gt; {
                          return (rec.employeeId != id);
                      })
                  });
          });
      }
  
      //Handle the edit request from the user for an employee
      handleEdit(id) {
          this.props.history.push('/employee/edit/' + id);
      }
  
      static renderEmployeeTable(empList) {
          return (
              &lt;table className='table'&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;&lt;/th&gt;
                          &lt;th&gt;Employee Identifier&lt;/th&gt;
                          &lt;th&gt;Name&lt;/th&gt;
                          &lt;th&gt;Gender&lt;/th&gt;
                          &lt;th&gt;Department&lt;/th&gt;
                          &lt;th&gt;City&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                      {empList.map(emp =&gt;
                          &lt;tr key={emp.employeeId}&gt;
                              &lt;td&gt;&lt;/td&gt;
                              &lt;td&gt;{emp.employeeId}&lt;/td&gt;
                              &lt;td&gt;{emp.name}&lt;/td&gt;
                              &lt;td&gt;{emp.gender}&lt;/td&gt;
                              &lt;td&gt;{emp.department}&lt;/td&gt;
                              &lt;td&gt;{emp.city}&lt;/td&gt;
                              &lt;td&gt;
                                  &lt;a className='action' onClick={(id) =&gt; this.handleEdit(emp.employeeId)}&gt;Edit&lt;/a&gt;  |
                                  &lt;a className='action' onClick={(id) =&gt; this.handleDelete(emp.employeeId)}&gt;Delete&lt;/a&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                      )}
                  &lt;/tbody&gt;
              &lt;/table&gt;
          );
      }
  </code></pre>
  
  <p>We can agree that there's nothing to fancy here. It's a simple <code>GET</code> and nothing more, but I always get this error :</p>
  
  <p><code>Unexpected token '&lt;' json at position 0</code></p>
  
  <p>Whatever what I'm trying to do.</p>
  
  <p>Those are my routes from <code>App.js</code> :</p>
  
  <pre class="lang-js prettyprint-override"><code>    &lt;Layout&gt;
          &lt;Route exact path='/' component={Home} /&gt;
          &lt;Route path='/fetchemployee' component={FetchEmployee} /&gt;
      &lt;/Layout&gt;
  </code></pre>
  
  <p>And this is my <code>Network Tab</code></p>
  
  <p><a href="https://i.stack.imgur.com/l5iUB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/l5iUB.png" alt="Network Activity"></a></p>
  
  <p>Can you help me figuring this one out? Do you have any ideas why I'm returning <code>HTML</code> from my controller?</p>
  
  <p>[Edit] </p>
  
  <p>When I added <code>"Accept": "application/json"</code> to my headers for my <code>fetch()</code>, I got a 404 telling me : </p>
  
  <pre><code>Cannot GET api/Employee/Index
  </code></pre>