title: Fetching JSON returns error Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 and status code 304: Not Modified
body: <p>I am trying to fetch a JSON file but it returns the errors <strong>Uncaught (in promise) SyntaxError: Unexpected token &lt; in JSON at position 0</strong> and <strong>304: Not Modified</strong>. I tried to add headers <code>'Content-Type': 'application/json</code> and <code>'Accept': 'application/json'</code> but then it returns error <strong>404: Not found</strong>.</p>
  
  <p>Here is the code where I am fetching my JSON:</p>
  
  <pre><code>import React from 'react';
  
  export default class LabExperiment extends React.Component {
  
  componentWillMount() {
      const readmePath = require("./docs/iat/iatDependency.json");
  
      fetch("./docs/iat/iatDependency.json")
      .then(response =&gt; {
          response.json();
      })
      .then(text =&gt; {
          console.log(text);
      });
  }
  
  render() {
      return(
          &lt;div&gt;Hello&lt;/div&gt;
      )
    }
  }
  </code></pre>
  
  <p>Here is my json file: </p>
  
  <pre><code>{
      "js": [
          "../jsPsych/jspsych.js",
          "../jsPsych/plugins/jspsych-iat-image.js",
          "../jsPsych/plugins/jspsych-iat-html.js",
          "../jsPsych/plugins/jspsych-html-keyboard-response.js"
      ],
      "css": [
          "../jsPsych/css/jspsych.css"
      ]
  }
  </code></pre>
  
  <p>I also at one point tried to use <code>response.text()</code> instead of <code>json()</code> but it returned my index.html file. </p>
  
  <p>I have been looking around the web for the past week trying to find a solution but what worked for others didn't work for me. Any advice? </p>
  
  <p>EDIT: 
  When I did <code>console.log(response.headers.get('Content-Type'))</code> it returned <code>text/html; charset=UTF-8</code>. Shouldn't it already be application/json? Why is the initial encoding 'text/html'?</p>