Get info from a JSON file Using Fetch - Cors Policy Issue

Question

I'm working in a local project with vanilla js. I'm trying to get a json from a local file, but I get an error about the CORS Policy. I already tried with Ajax, Fetch API, and others, but I get the same error. So... It's posible to avoid this Policy with another option?

This is my code:

const loadFile = () =>{
    fetch("file.json")
    .then( response => response.json())
    .then( content => {
        console.log(content);
    })
}

Please post your code inside your answer. There is a code block formatter to use, which makes things easier for people answering your question. — Michelle, Jul 07 '20 at 00:59

score 0 · Answer 1 · answered Jul 07 '20 at 01:01

0

You can use the JSONP (JSON with Padding) method for getting around the CORS restrictions.

answered Jul 07 '20 at 01:01

luek baja

1,475
8
20

Always Helping · Accepted Answer · 2020-07-07T01:29:03.873

0

To avoid CORS error issue just use this https://cors-anywhere.herokuapp.com/ and put your url after.

Local Enviroment => If you are using local environment you can simple { mode: 'no-cors'} to your fetch requests it should be all good.

Change your code to this. Should be fine.

const loadFile = () => { 
  //CORS URL
  let corsURL = 'https://cors-anywhere.herokuapp.com/';

  //My File URL
  let myURL = 'https://your_url.com/file.json';

  fetch(corsURL + myURL, { mode: 'no-cors'})
    .then(response => response.json())
    .then(content => {
      console.log(content);
    })
}

loadFile()

edited Jul 07 '20 at 01:29

answered Jul 07 '20 at 01:03

Always Helping

14,316
4
13
29

@ChristianElíasCruzGonzález It should work fine on local env as well. Just specify where the file.json is. – Always Helping Jul 07 '20 at 01:09
That is the problem! When I load the page, in the console, I recive an error about the CORS Policy – Christian Elías Jul 07 '20 at 01:11
@ChristianElíasCruzGonzález If file.json is local server you should NOT even see CORS issue. Something else is wrong there. – Always Helping Jul 07 '20 at 01:12
I think the same – Christian Elías Jul 07 '20 at 01:14
@ChristianElíasCruzGonzález I have edited my answer please try now. – Always Helping Jul 07 '20 at 01:15
Yeah! This is the answer. Thank you! – Christian Elías Jul 07 '20 at 01:26
@ChristianElíasCruzGonzález You are welcome. Glad i was able to help you. Thanks – Always Helping Jul 07 '20 at 01:34

Get info from a JSON file Using Fetch - Cors Policy Issue

2 Answers2