title: JavaScript JSON or JSONP request
body: <p>So I'm trying to request JSON data from this URL. So far no success. I have tried many methods to request the JSON data (fetch, fetchJsonp, JQuery, p5.js and xhr). So far I think that fetch and fetchJsonp have worked the best for me. </p>
  
  <p><strong>Under is the code and errors i'm having:</strong></p>
  
  <pre><code>let url = "https://www.sodexo.fi/ruokalistat/output/daily_json/27843/2018/04/25/fi";
  
  fetch(url)
    .then(response =&gt; response.json())
    .then(json =&gt; gotData(json))
  
  function gotData(data) {
    console.log(data);
  }
  </code></pre>
  
  <p><strong>Error:</strong></p>
  
  <blockquote>
    <p>Failed to load <a href="https://www.sodexo.fi/ruokalistat/output/daily_json/27843/2018/04/25/fi" rel="nofollow noreferrer">https://www.sodexo.fi/ruokalistat/output/daily_json/27843/2018/04/25/fi</a>: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '<a href="http://localhost:8080" rel="nofollow noreferrer">http://localhost:8080</a>' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.</p>
  </blockquote>
  
  <p><strong>Then with <code>fetchJsonp()</code>:</strong></p>
  
  <pre><code>let url = "https://www.sodexo.fi/ruokalistat/output/daily_json/27843/2018/04/25/fi";
  
  fetchJsonp(url)
    .then(response =&gt; response.json())
    .then(json =&gt; gotData(json))
  
  function gotData(data) {
    console.log(data);
  }
  </code></pre>
  
  <p><strong>Error:</strong></p>
  
  <blockquote>
    <p>Refused to execute script from '<a href="https://www.sodexo.fi/ruokalistat/output/daily_json/27843/2018/04/25/fi?callback=jsonp_1524401181754_72515" rel="nofollow noreferrer">https://www.sodexo.fi/ruokalistat/output/daily_json/27843/2018/04/25/fi?callback=jsonp_1524401181754_72515</a>' because its MIME type ('application/json') is not executable, and strict MIME type checking is enabled.</p>
    
    <p>fetch-jsonp.min.js:1 Uncaught (in promise) Error: JSONP request to <a href="https://www.sodexo.fi/ruokalistat/output/daily_json/27843/2018/04/25/fi" rel="nofollow noreferrer">https://www.sodexo.fi/ruokalistat/output/daily_json/27843/2018/04/25/fi</a> failed
        at HTMLScriptElement.m.onerror (fetch-jsonp.min.js:1)</p>
  </blockquote>
  
  <p>According to my research CORS is server sided thing and is usually taken care with JSONP but that's not working for me. According to the error it has something to do with the MIME type but I haven't found how to fix this. So if you know how to fix that or if you have any other solutions to this issue I would appreciate your help. And yes I'm kind of new on JS so it might be something really stupid :D.</p>
  
  <p>Edit: As mentioned by someone (they deleted their answer) there is <a href="https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi" rel="nofollow noreferrer">Extension</a> for chrome. But that won't really help me if I would use this script on an actual web page I cant require everyone to have that extension. </p>