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

JavaScript
1

Hi, I keep getting this error

“Access to script at ‘file:///C:/Users/Claudia/Desktop/expenses-chart-component-main/expenses-chart-component-main.js’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, isolated-app, brave, https, chrome-untrusted, data, chrome-extension, chrome.”

I have added this to my html:

<script type='module' src='expenses-chart-component-main.js'></script>

and this is the js code in question

import data from 'https://www.jsonkeeper.com/b/QI82' assert { type: "json" };

from what I read online the json data needs to be on a hosted/server site , can’t be local?
I first tried a link to a raw github json file , that didn’t work.
Then I tried using https://www.jsonkeeper.com/
didn’t work either. I’m lost as what to do about this error.

hope someone can help.
Thanks!

2

You can use a CORS proxy but that isn’t meant for production.

Create a simple Express server on something like Replit/Glitch or some other free hosting site. Add the cors package and serve the JSON yourself. Then import the JSON from that endpoint.

Simple Express app 
const express = require('express');
const app = express();
const cors = require('cors');

app.use(cors());

app.get("/", (req, res) => {
  return res.json([
    { day: "mon", amount: 17.45 },
    { day: "tue", amount: 34.91 },
    { day: "wed", amount: 52.36 },
    { day: "thu", amount: 31.07 },
    { day: "fri", amount: 23.39 },
    { day: "sat", amount: 43.28 },
    { day: "sun", amount: 25.48 },
  ]);
});

app.listen(3000);
1 Like
3

Thanks. It tried the Cors Proxy, but can’t get it to work? It should be fine as my code is just a practice project , so not worried about production.

I tried this import statement:

import data from 'https://corsproxy.io/?https://raw.githubusercontent.com/cmb347827/expenses-chart-component-main/main/data.json?token=GHSAT0AAAAAACCV2CADPZLX4FDZXOGL7NBYZDCTKEA' assert{ type:'json'};

tried this as well

import data from 'https://corsproxy.io/?https://www.jsonkeeper.com/b/QI82' assert { type: "json" };

and still get the same error ?
Hope you can help.
Thanks

4

It is hopeless. I will not be able to figure this out on my own, as it seems like back-end develpment. I have only focused on front-end and plan to stick to front-end.
Is there a way a noob like me can solve this ?

I’ve used this now:

const url = 'https://corsproxy.io/?' + encodeURIComponent('https://www.jsonkeeper.com/b/QI82');

and

import data from url assert { type: "json" };

The Github link links to the raw json data file, and jsonkeeper is the same.
Hope you will help. Thanks

5

I get the CORS error , even when removing all import statements and with just this script line left

<script type='module' src='expenses-chart-component-main.js'></script>

very strange. I hope someone knows what to do.

I would like to import the json file from my github repo , as the json file will be local to my github repo.

thanks

6

The jsonkeeper import works for me.

import data from 'https://corsproxy.io/?https://www.jsonkeeper.com/b/QI82' assert { type: "json" };

Maybe you are just not serving the HTML? Use the VS Code Live Server extension.

The GitHub raw would likely have worked if the RawGit site was still running, but it is not.

Also, this won’t work in Firefox or any other browser that doesn’t support import assertions.

1 Like
7

Thanks, I managed to get it to work with async / await .

Now I’m trying to export/import a JS function from one JS file to another (both local on my laptop). Everywhere I look online I get the feeling this is only available in node.js (backend) ? Because I get a syntaxerrror when I try to use export in one file.
Is this even possible to do local ?
Thanks

9

Off course. Here’s my addCarets.js file code (partially because it’s too big )
this file contains just one function : addCarets()

export function addCarets(){
    //function code
}

and then expenses-chart-component-main.js
only the import code is important I assume

import {addCarets} from 'addCarets.js';

and I get these error messages:

caught SyntaxError: Unexpected token ‘export’
expenses-chart-component-main.js:2 Uncaught SyntaxError: Cannot use import statement outside a module

When I add type=‘module’

<script type='module' src='expenses-chart-component-main.js'></script>

I get this error as well:

Acess to script at ‘file:///C:/Users/Melissa/Desktop/codementor/junior/expenses-chart-component-main/expenses-chart-component-main.js’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, isolated-app, brave, https, chrome-untrusted, data, chrome-extension, chrome.

Thanks

10

You need to be running this on a local server. If you are using modules you cannot load them using the file protocol, it has to be via (eg) http, as the error message states. You get this error if you just open an html file in a browser and it tries to load a JS module.

It’s absolutely not backend development, this is just a standard thing you need to understand because it directly affects your ability to develop stuff.

As said, need to understand exactly what you’re doing but you really need to be using a local development server to develop stuff and it looks very much like you aren’t if you’re trying to load modules using file://

11

What do you mean with a local server? Do I upload all files to some server ?
What about files stored in a Github repo?

Right now i’m just trying to export/import a local function from one JS file to another JS file.

12

As in, you need to be running a server on your computer. You can’t just open a local HTML file in a browser, it won’t work.

So for example: How do you set up a local testing server? - Learn web development | MDN

Just to be specific re this absolutely not being backend, it is helpful to learn what a browser is doing, what HTTP is, what CORS is, etc. These are core things re frontend. The browser in this case is preventing you opening the file because there are sensible security protocols that prevent you doing this: it is important to understand why they are there

1 Like
13

I already understood files needed to be on a remote server, i had tried earlier with Github repo files , but got the same errors.
How do I do this using a Github repo ?
Thanks

14

A GitHub repo is just a record of changes to a folder of files, I’m not quite sure what you mean, can you be more specific?

15

I mean , if I have two JS files in a repo, and want to link to one of them in an import statement , then it should work as these files are not local? One is my expenses-chart-component-main.js file and the other addCarets.js

As in:

import {addCarets} from “https://corsproxy.io/?https://raw.githubusercontent.com/cmb347827/expenses-chart-component-main/addCarets.js?token=GHSAT0AAAAAACCV2CADPZLX4FDZXOG”;

?

This is the part thats confusing to me, as I don’t see how to do this .

Do I need to host the JS file I want to export on some other site then github?
And is there a way that this needs to be done?
Thanks

16

Do I need to host the JS file I want to export on some other site then github?

Github is not a CDN. GitHub is a place to store versions of a code for development & version control. The thing you’re trying to link isn’t a JS file. GitHub sets the content type as “text/plain” to ensure you can’t do what you’re trying to do. It has done this for about 10 years to combat hotlinking. Again, to stress, it’s not a file serving provider.

The question here is why can you not just put the file in your project instead of trying to dynamically link it from somewhere? Otherwise, yes, you need to put the file somewhere on a server you can access if you want to access it remotely.

17

I did at first have the file in my project, added the second script tag to my index.html page, and I tried using import , which did not work?

I now read on a site that import/export can only be used with node.js (server side ) code?

I solved it instead of using import/export ,by placing the second script in the head (instead of with the other end of body script tag ).

18

No, it can be used anywhere, it’s part of the JavaScript language

1 Like
19

geeksforgeeks link

maybe just the language they used, but made it sound like it. I know you’re right, just if tutorials are confusing sounding , it doesn’t help.

20

Yep I can see it says that. It’s years out of date now and I’m not sure why it hasn’t been updated at all because it’s just flat out wrong (when it was first coming in there wasn’t support in Node, the Node support has come after browser support) – be careful about just going off a single article (MDN should normally be first place to check)

1 Like
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