how to get json from github

Question

I can't get Repl.it to pull json from github. Do I need the api or just a better url?

Errors:

While using the url https://raw.githubusercontent.com/Xiija/FakeDB/master/db.json

TypeError: NetworkError when attempting to fetch resource.

While using this url Xiija.github.io/JSON/db.json

SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data.

But, when I add https to it https://Xiija.github.io/JSON/db.json

TypeError: NetworkError when attempting to fetch resource.

The request

    const myHeaders = new Headers({
        'Content-Type': 'application/json',  // text/xml  .. application/json
        'Access-Control-Allow-Headers': '*',
        'accept': 'application/vnd.github.v3.raw',
        'user-agent': 'dataApi'
    });
    
  
    let tm = new Date().getTime();
    const myRequest = new Request(url + '?time=' + tm, {
      method: 'GET',
      rejectUnauthorized: false, 
      insecureHTTPParser: true,
      mode: 'cors',
      cache: 'default',
      headers: myHeaders,   
    });

Testing on codepen... both of these urls return json when pasted into a browser "https://Xiija.github.io/JSON/db.json" "https://jsonplaceholder.typicode.com/todos/1" but only the jsonplaceholder one returns data in codepen — Greenman, May 30 '22 at 00:35

score 1 · Answer 1 · answered May 30 '22 at 19:49

Your problem is with CORS.

GitHub does not allow CORS pre-flight requests (OPTIONS requests) on GitHub Pages content (the xiija.github.io URL) or raw content (the raw.githubusercontent.com URL), so the browser decides that you are not permitted to access these URLs.

What you need is to avoid sending the pre-flight request. Your myHeaders code is the problem here: setting the Content-Type: application/json and Access-Control-Allow-Headers: *` is causing the pre-flight request.

For several reasons, you should not be sending any of the headers you are sending:

Content-Type header on a Request is only for requests that have a body (e.g. POST, PUT, PATCH), not for GET requests.
Access-Control-Allow-Headers header is for responses, not requests.
Accept header is only helpful if the server cares about it, but GitHub Pages and raw file access don't use it.
User-Agent is ignored by the browser and the browser's built-in user agent is sent instead.

Here is a version of your code that works:

const url = 'https://raw.githubusercontent.com/Xiija/FakeDB/master/db.json';

let tm = new Date().getTime();
const myRequest = new Request(url + '?time=' + tm, {
  method: 'GET',
  rejectUnauthorized: false, 
  insecureHTTPParser: true,
  mode: 'cors',
  cache: 'default',
});

fetch(myRequest).then(r => r.json()).then(r => console.log(r))

how to get json from github

1 Answers1