8

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

Improve this question
3
  • 1
    I dont know whats wrong in the question to deserve -1 points :( Commented Jul 28, 2020 at 11:05
  • 1
    Show research if you want my upvote. Commented Jul 28, 2020 at 11:05
  • Edited sir , I am relatively new so i dont know how to ask good questions ,Thank you for guiding me @AaronBell Commented Jul 28, 2020 at 11:11

4 Answers 4

Reset to default
9

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);
Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

I'm pretty sure the person asking the question has no access to modify those settings on the GitHub server.
The raw url returns Access-Control-Allow-Origin: *
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
okay let me try to fetch data from the raw source :D @MaxGDN
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.
|
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.

Improve this answer

2 Comments

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
If you use the https://raw.githubusercontent.com/ prefix, this will append the correct headers to be downloaded without using any proxy.
1

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'
      }
)
Improve this answer

2 Comments

This will not work i tried this we have to use the raw file as stated below by @MaxGDN
mode: 'no-cors' will cause this to fail because it won't seek permission with CORS (as opposed to not being given permission by CORS).
-1

If you need to insert text into HTML, you can use hmpl-js:

import hmpl from "hmpl-js";

const templateFn = hmpl.compile(
  `<div>
      <div>Clicks: {{#request src="https://github.com/ProjectSakura/OTA/blob/10/changelog/changelog_beryllium.txt"}}{{/request}}</div>
  </div>`
);

const txt = templateFn().response;

document.querySelector("#app").append(txt);
Improve this answer

1 Comment

This appears to be server side code, but the question is about client side code (since it is being blocked by the same origin policy).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.