1

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.

Under is the code and errors i'm having:

let url = "https://www.sodexo.fi/ruokalistat/output/daily_json/27843/2018/04/25/fi";

fetch(url)
  .then(response => response.json())
  .then(json => gotData(json))

function gotData(data) {
  console.log(data);
}

Error:

Failed to load https://www.sodexo.fi/ruokalistat/output/daily_json/27843/2018/04/25/fi: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' 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.

Then with fetchJsonp():

let url = "https://www.sodexo.fi/ruokalistat/output/daily_json/27843/2018/04/25/fi";

fetchJsonp(url)
  .then(response => response.json())
  .then(json => gotData(json))

function gotData(data) {
  console.log(data);
}

Error:

Refused to execute script from 'https://www.sodexo.fi/ruokalistat/output/daily_json/27843/2018/04/25/fi?callback=jsonp_1524401181754_72515' because its MIME type ('application/json') is not executable, and strict MIME type checking is enabled.

fetch-jsonp.min.js:1 Uncaught (in promise) Error: JSONP request to https://www.sodexo.fi/ruokalistat/output/daily_json/27843/2018/04/25/fi failed at HTMLScriptElement.m.onerror (fetch-jsonp.min.js:1)

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.

Edit: As mentioned by someone (they deleted their answer) there is Extension 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.

Jussi Roos
  • 46
  • 6
  • The only way to do it is to have your own server code fetch the content in a proxy arrangement. Your client asks your server for the content, then your server asks the target server and returns what it gets to the client. – Pointy Apr 22 '18 at 13:00
  • @Pointy That sounds bit complicated. So is that possible via plain html or does it need something like PHP or server sided scripts? And what would be the easiest solution? – Jussi Roos Apr 22 '18 at 13:11
  • The problem is that the server you're trying to use is not set up to be used that way, so your browser won't allow it at all. You have to use your own server with your own proxy code to act as an intermediary. It's a fundamental web security thing. – Pointy Apr 22 '18 at 13:37
  • JSONP is a serverside thing as well. In general, when the server does not allow it, you cannot access it from the client side of your page. – Bergi Apr 22 '18 at 13:51

0 Answers0