Visualize Data with a Treemap Diagram- not sure why I get access denied

[albornozleo95]

this is how I trying to get the object from this link:
https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/kickstarter-funding-data.json

async function run(){

const kickstaterResp = await fetch("https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/kickstarter-funding-data.json");
  const kickstarter = await kickstaterResp.json();

console.log(kickstarter);
}
run()

I get this in the console.

help!

[laurentlabine]

I just tried it locally hosted on my machine and the request went through without any problem…

CORS is a cross access policy restriction preventing you to load content from another web site… The only thing i can think of is it could maybe be enabled on your server side and preventing you from loading data from outside?

How is it hosted? Any chance you can link to the code?

Have you had success with the previous projects hosting them the same way?

[albornozleo95]

https://codepen.io/leboroz-the-bold/pen/vYgMgMv?editors=0011
here.

[jeremy.a.gray]

I’m confused. I just tried your codepen link and it downloaded and logged the kickstarter info without problem. Are you having the problem on codepen or elsewhere?

[albornozleo95]

yes, I tried on codepen and VSCode.

I can fetch it in the terminal tho.
not sure what is going on.

[jeremy.a.gray]

Like I said, I tried your codepen link and it worked. Logged the data, no errors, so you could continue the project there.

As for the errors, something is trying a GET to 127.0.0.1:5500 and failing and something else is referencing geojson (old choropleth template perhaps?) and failing. I’d fix those, even though they are likely unrelated. What is interesting is the CORS errors. I think what is happening is that you are causing this by loading your page from a local server and then trying to load the data from elsewhere, which is the CORS violation (I think).

You can do all the D3 projects in a html file with an included javascript script, which eliminates all the problems you can have with babel (and node and webpack…) and won’t cause a CORS violation (even locally it will fetch the data without problem). It appears you are running vscode (and not emacs?) so you may need to check if it is being helpful and running this in a server for you if you did not run it on a server yourself.