From origin 'null' has been blocked by CORS policy: Cross origin requests error

JavaScript
21

Thanks. And now I’m reading a D3 tutorial, and in the D3,json section it says to do this:

Let’s create a sample file users.json in the data folder of your project’s root folder and paste the following JSON in it.

so local right?
With this code :

d3.json("/data/users.json", function(data) {
    console.log(data);
});

And off course if I do the same in my project I get the stupid CORS error again.
It’s okay when I use https://corsproxy.io/?https://www.jsonkeeper.com/b/6P7P instead .
I understand why, but why is it possible the other way (local ) in the tutorial ?
I don’t care much for MDN myself.

this D3 tutorial
https://www.tutorialsteacher.com/d3js/loading-data-from-file-in-d3js

22

Because it isn’t a cross-origin (CO) resource (R).

It is a browser security feature.

What is the point of using jsonkeeper when you can just create the file locally?

1 Like
24

When I do that , I get a CORS error? The JSON file is on my laptop, but when I just link to it I get a CORS error, so I hosted it in jsonkeeper.

25

Are you serving the page like you were told to?

26

Sorry for late reply, but just realised I’d written some stuff and not posted:

The CORS error isn’t stupid. It’s frustrating if you don’t know why you’re getting it (here I would strongly suggest getting the basics of how browser networking works down), but you shouldn’t be getting it.

CORS stands for Cross Origin Request Sharing: it is a mechanism that is implemented on a server. At core, it’s just a way to specify allowed addresses that a computer can share things with when a browser makes an HTTP request from them. Not on the list, your browser don’t get the thing.

More specifically, the server specifies

  • which domains are allowed. Here, the domain is freecodecamp. Then forum is a subdomain, and org is a top-level domain. So if freecodecamp was specifically allowed, then [unless specified otherwise] any requests from forum.freecodecamp would also be allowed.
  • which schemes are allowed. The scheme in turn specifies which protocol is being used – eg http://my-site.com, “http” is the scheme, from which is can be inferred that the protocol being used is HTTP.
  • which ports are allowed. The port is a number, like http:://localhost:4000, the port is 4000.

So a computer on a network makes a request to another computer, with a different address, for a resource: in this case, a JSON file.

The computer to whom the request is made must be configured to allow it to complete the request and send that JSON file. In that case, w/r/t CORS, the first computer, the one making the request, it’s address must be whitelisted to allow the data to be transferred.

jsonkeeper is a hosting service for JSON files. It’s CORS policy will be very forgiving: it’s likely to be basically “allow anyone who requests a JSON file have it”.

in your case you are using JS modules. You have to run a server locally when you are developing with them. If you aren’t running a server, the browser will look at that import and see that the protcol is not HTTP or similar, and throw a CORS error:

  1. if you running a local server, and the file you’re importing is local to what’s being served (ie it is in the same folder, either adjacent to or in a subdirectory), then
    import "./my-module.js"
    will be read as something like
    import "http://localhost:4000/my-module.js"
  2. if you are not running a local server and you try to just open the HTML file referencing the JS in a browser, it will be read as
    import "file:://some/path/from/the/root/to/my-module.js"
    This will not work, you cannot just import arbitrary files from a computer using the file protocol because that would be an insane security risk.
  3. if you are running a local server, and the file you’re importing is not local to whatever is being served – eg you are serving whatever is in a folder “projects/my-project/”, but my-module.js is in “projects/”, so a directory above – that will also fail, because, again, trying to import a file from the computer’s local filesystem, outside of what is being served.

The error message when you tried to import a local file matches 2 or 3, but because it’s not been explained what you’re doing in development, it’s not possible to determine. Because the import from jsonkeeper is also failing, I would assume 2 (ie you are not running a server), but there may be some other issue.

27

I’m at a loss still . I’ve used fetch , with async/await , to get the json data stored at jsonkeeper. It works perfectly fine on my laptop when I view it , and when I view my finished project in github I can see it looks fine.

But when I tried to upload the project to frontendmentor and saw a screenshot, the bar chart did not load.

Here’s my github project:
https://github.com/cmb347827/expenses-chart-component-main

So what did I do wrong in fetching the data?

I do see these two errors in my local browser view:

Error with Permissions-Policy header: Origin trial controlled feature not enabled: ‘interest-cohort’.

and this one

Audit usage of navigator.userAgent, navigator.appVersion, and navigator.platform

could either be related why my bar chart is not showing up in frontendmentor screenshot?

I still don’t know how to use import with storing data on jsonKeeper. That should work because the it’s stored in a https: location? I’m confused because I got the CORS error.

And lasJorg said:

What is the point of using jsonkeeper when you can just create the file locally?

How can I create a file locally without getting the CORS error?

I’m misunderstanding something vital here. I feel like such an idiot.
Hope someone can help.

Thanks

28

I get it to work in frontendmentor now, when I changed to the raw github page again.
Still get the two errors though:

Error with Permissions-Policy header: Origin trial controlled feature not enabled: ‘interest-cohort’.

and

Audit usage of navigator.userAgent, navigator.appVersion, and navigator.platform

Thanks

29

You should be able to just fetch the local file.

async function getJson() {
  const response = await fetch("./data.json");
  const data = await response.json();
  drawBars(data);
}

Also, there is no point in turning the response into text and then back to JSON.

I don’t think the errors you were seeing are related to your code. Seem more like an issue with the site and Chrome (FLoC and a deprecation warning)