How to fetch data from a particular github txt file in html page via javascript

Question

I want to fetch the data of this url https://github.com/ProjectSakura/OTA/blob/10/changelog/changelog_beryllium.txt#L2

I am trying to use fetch api to get the data but i am getting cors error

Here is what i am trying to do

async function showmodal1() {
    console.log("hello")
    const data = await 
                 fetch('https://github.com/ProjectSakura/OTA/blob/10/changelog/changelog_beryllium.txt');
    console.log(data)
}
showmodal1();

Is there any way to get the data of the github txt file I tried finding this over internet but i was unable to find anything Thank you for your help in advance

Edit:

Access to fetch at 'https://github.com/ProjectSakura/OTA/blob/10/changelog/changelog_beryllium.txt' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. changelog.html:361 
GET https://github.com/ProjectSakura/OTA/blob/10/changelog/changelog_beryllium.txt net::ERR_FAILED
showmodal1 @ changelog.html:361
(anonymous) @ changelog.html:365
dispatch @ jquery.min.js:3
r.handle @ jquery.min.js:3
changelog.html:364 

Uncaught (in promise) TypeError: Failed to fetch

here is the error log

Edit2:

Promises/Fetch in JavaScript: how to extract text from text file

Reading code from GitHub as text (raw) in a web page

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Here are the links that I discovered before writing the question

I dont know whats wrong in the question to deserve -1 points :( — Arun, Jul 28 '20 at 11:05
Edited sir , I am relatively new so i dont know how to ask good questions ,Thank you for guiding me @AaronBell — Arun, Jul 28 '20 at 11:11

score 7 · Accepted Answer · edited Jul 28 '20 at 11:02

7

Your code is being deployed from 'http://127.0.0.1:5500' which is not the same as 'http://github.com' and is being blocked by CORS (which is enabled on modern browsers by default). You need to add the specific headers to your development server.

The * in the Access-Control-Allow-Origin header allows communication to any (wildcard) domain.

Sample:

  "Access-Control-Allow-Origin": "*",
  "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
  "Access-Control-Allow-Headers": "X-Requested-With, Content-Type, Authorization"

There are as well browser extensions that "unblock" CORS but would be considered unfavourable.

Edit:

Fetch the raw source too. The URL is available by clicking the raw button on the URL you were trying to access in your request.

Edit2: here is the code that will work

const url1 = 'https://raw.githubusercontent.com/ProjectSakura/OTA/10/changelog/changelog_beryllium.txt'
const response = await fetch(url1);
const data = await response.text();
console.log(data);

edited Jul 28 '20 at 11:02

Arun

601
10
15

answered Jul 28 '20 at 10:06

MaxGDN

1,251
1
7
14

3

I'm pretty sure the person asking the question has no access to modify those settings on the GitHub server. – Fullslack Jul 28 '20 at 10:09
2

The raw url returns Access-Control-Allow-Origin: * – MaxGDN Jul 28 '20 at 10:11
i actually know about cors i just want to fetch data from the github public repository I will edit the question now I am not sure what you want to say @Fullslack.dev but i think you get my question Do you know a way – Arun Jul 28 '20 at 10:13
okay let me try to fetch data from the raw source :D @MaxGDN – Arun Jul 28 '20 at 10:16
2

If you have a server like node you can get the info with `node-fetch` or `axios` for node. You also could use `puppeteer` and then read it. I cannot think of a method to get around CORS in a browser. – Andre Jul 28 '20 at 10:17
Okay i will try that @Andre but right now i am working on a static file :D – Arun Jul 28 '20 at 10:54

score 2 · Answer 2 · answered Jul 28 '20 at 10:35

On client side you will not be able to fetch GitHub text file as browser enforces cross browser origin policies as a security measure. Your source itself must set the relevant CORS headers to allow that. You can however do it from server side. Create a node server like below using express, and then try accessing data from your own server instead.

server.js

const express = require('express');
const cors = require('cors');
const fetch = require('node-fetch');

const app = express();
app.use(cors());

app.get('/txt_response', async (req, res) => {
    const resp = await fetch('https://github.com/ProjectSakura/OTA/blob/10/changelog/changelog_beryllium.txt');
    const textResp = await resp.text();
    res.json(textResp);
});

app.listen('9000');

Now you can use http://localhost:9000/txt_response as your endpoint to query data in your client-side code.

well i was looking for something that work on client side but i understand this and implemented in the code and it worked thank you for your help But we need to use the raw file of instead of the github repo link as stated below by @MaxGDN — Arun, Jul 28 '20 at 10:56

score 2 · Answer 3 · answered Jul 28 '20 at 10:53

2

Take a look here and scroll down to "Supplying request options":

fetch(
      'https://github.com/ProjectSakura/OTA/blob/10/changelog/changelog_beryllium.txt', 
      {
        mode: 'no-cors'
      }
)

answered Jul 28 '20 at 10:53

Kodiak

492
6
13

1

This will not work i tried this we have to use the raw file as stated below by @MaxGDN – Arun Jul 28 '20 at 10:58

How to fetch data from a particular github txt file in html page via javascript

3 Answers3

Linked

Related