title: Origin null is not allowed by Access-Control-Allow-Origin. Status code: 200 in JavaScript?
body: <p>I have been trying to access a local json file in javaScript using fetch (as shown below).</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>fetch('./js/data.json')
    .then(response =&gt; response.json())
    .then((data) =&gt; {
      console.log(data);
    })
    .then((error) =&gt; {
      console.log(error);
    });</code></pre>
  </div>
  </div>
  </p>
  <p>I found out from this that I can not access the json file localy and not to access it from a https sever on localhost.</p>
  <p>I set this up using ngrok.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>fetch('https://a9f8-86-133-120-217.ngrok.io/js/data.json', {
      method: 'GET',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      }, 
    })  .then(response =&gt; response.json())
          .then((data) =&gt; {
              console.log(data);
          })
          .then((error) =&gt; {
              console.log(error);
          });</code></pre>
  </div>
  </div>
  </p>
  <p>When I now run the code I get the following errors.</p>
  <blockquote>
  <p>[Error] Preflight response is not successful. Status code: 501</p>
  </blockquote>
  <blockquote>
  <p>[Error] Fetch API cannot load <a href="https://a9f8-86-133-120-217.ngrok.io/js/data.json" rel="nofollow noreferrer">https://a9f8-86-133-120-217.ngrok.io/js/data.json</a> due to access control checks.</p>
  </blockquote>
  <p>After some research, I found this was due to working called cors.</p>
  <p>I then added mode: 'no-cors' to my code. This then meant that the JSON file was being fetched but it was casing more error.</p>
  <blockquote>
  <p>Unhandled Promise Rejection: SyntaxError: The string did not match the expected pattern.</p>
  </blockquote>
  <p>The error is from the following line.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>.then(response =&gt; response.json())</code></pre>
  </div>
  </div>
  </p>
  <p>When I remove 'Content-Type': 'application/json' I get the following error.</p>
  <blockquote>
  <p>Origin null is not allowed by Access-Control-Allow-Origin. Status code: 200</p>
  </blockquote>
  <p>I have been trying to fix this for a few hours but have had no luck.</p>
  <p>I feel this is something so simple that I'm missing.</p>