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

Answer 1

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);

Answer 2

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.

Answer 3

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'
      }
)