Help wanted for JSON skill test

MDN Learn
#1

I don’t know how to explain this but I hope you understand me.
It gave me two errror messages when I tried opening my solution in my browser. The errors are:

  1. json1-download.html:33 Fetch API cannot load file:///C:/Users/USER/Desktop/MDN%20learning/learning-area/javascript/oojs/tasks/json/sample.json. URL scheme must be “http” or “https” for CORS request.
  2. json1-download.html:33 Uncaught (in promise) TypeError: Failed to fetch
    at json1-download.html:33
    (anonymous) @ json1-download.html:33
    Promise.then (async)
    (anonymous) @ json1-download.html:35

I later tried doing it here on MDN and it works. My question is what’s wrong with the one I uploaded in my browser(I used Chrome and firefox)?
This is the link to what I tried using codepen(the same thing I did in my files):

#2

Hello @Olaleye_Blessing, I cannot see the codepen since (I think) Discourse prevents them to be embedded for security reason.

Could you paste a link to your pen?

1 Like
#3

I managed to get the CodePen link from the email notification about this post :wink:

I had a look, and it wouldn’t work, and I wasn’t sure why, because @Olaleye_Blessing 's code definitely seems to be on the right track.

One thing I thought — looking at the error message, it looks like you are trying to load your sample.json file from your local hard drive. This won’t work because of browser security restrictions. If you instead try loading it from our version on github (https://raw.githubusercontent.com/mdn/learning-area/master/javascript/oojs/tasks/json/sample.json), then it may well work better.

Also, try comparing your answer to our version, and compare how they differ.

2 Likes
#4

I don’t know if I got what you’re trying to say(You know I’m a total novice). You said it didn’t work because I tried to load it from my local hard drive but it might have worked if I had loaded it from the link you sent. But I’m confused now because both sample.json files are the same when I compared them.

I will try to use the link directly(like do it as you did it in your example), see if it works and give you guys feedback.

I would be happy if you could explain this: browser security restrictions. Thanks and sorry for my poor English.

#5

sure

Modified: Click on the loved link

#6

:slightly_smiling_face: :slightly_smiling_face: :slightly_smiling_face:

Finally working: https://codepen.io/BikkyBlexxy/pen/VwvoazG

But Sirs, I still don’t understan what you meant by BROWSER SECURITY RESTRICTIONS :confused: :slightly_smiling_face:

#7

Well done @Olaleye_Blessing, this is some great work!

The only thing I’d do is improve the spacing in your output paragraph:

kittenInfo = `Total of ${total} kittens: ${male} males and ${
    total - male
  } females.`;

For browser security restrictions, basically I’m talking about same-origin policy — the idea that, for security purposes, a web page in one location (origin) is not allowed to access resources in another location, unless given explicit permission to do so (which is what CORS does). If this security policy did not exist, bad people on the web would constantly be writing code to steal sensitive information from other sites, and the web would be unusuable.

There is a more detailed to same origin policy here: https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy

1 Like