Develop Reference

Use asset in a github release to modify a github pages website

I'm making a website to display a project that I've got. About once a week, this project generates a new release which has a file machine_friendly.csv. This file just contains some generated data (and is different every time).
I want to create a github pages website which a user can navigate to and see a prettified version of the machine_friendly.csv file. The problem is that github's CORS doesn't allow me to directly download the file. For example, this doesn't work:
React.useEffect(() => {
fetch('https://github.com/beyarkay/eskom-calendar/releases/download/latest/machine_friendly.csv')
.then(response => {
if (response.ok) return response.json()
throw new Error('Network response was not ok.')
})
.then(data => console.log(data.contents))
.catch(err => console.log(err));
}, []);
and gives CORS error messages:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at
https://github.com/beyarkay/eskom-calendar/releases/download/latest/machine_friendly.csv.
(Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
Status code: 302.
Is there any way of getting around this? I've tried uploading the file to a pastebin as well as to the github release, but none of the pastebins I've tried enable CORS for free. I've also tried some CORS proxies, but they either take too long or just don't work anymore. I also tried using github's API, but that also gives CORS problems.
Is there a service online that I can upload my small (<1MB) file to and download it later via javascript?

Javascript : Fetch api vs AJAX

I have this code
fetch('http://example.com/movies.json')
.then(response => response.json())
.then(data => console.log(data));
Is using Fetch API for a request like in the code above considered as an AJAX request?
I a request considered an AJAX request only if we use the XMLHttpRequest object ?

Yes, There are several ways to send Asynchronous requests like jQuery, axios, Fetch API or XMLhttprequest.

fetch is an ajax request.
but fetch is a simple api and have not, so I recommended fatcher
fatcher is a lightweight HTTP request library based on fetch, allows us to use native fetch for web requests in a browser and NodeJS environment.
It is wrapped using the native fetch, we require that browsers or NodeJS support fetch when we use it.
Fetch support is already pretty good in modern browsers, so we don't have to worry about FETCH compatibility
In NodeJS, fetch already has some support starting with '18.0.0'
Fatcher aims to embrace the fetch of the standard library and at the same time provide some functions that cannot be provided in fetch, as well as make the function better expand and reuse.
import { fatcher, isFatcherError } from 'fatcher';
fatcher({
url: '/',
})
.then(result => {
// Response
const { data, status } = result;
})
.catch(err => {
// Catch Fatcher Error
if (isFatcherError(err)) {
// Request successfully. But response status code is not 2xx.
console.error(err.toJSON());
return;
}
// This is other errors.
});

JS equivalent of Python request

I am requesting a response from Spotify API. All I need to know is how to get this python script statement into js. What should I use in java that is like requests in python
query = "https://api.spotify.com/v1/playlists/{}/tracks?uris=.
{}".format(created_playlist, tracks);
response = requests.post(query, {"headers": {"Content-Type": "application/json", "Authorization": "Bearer {}".format(token3)}})

For Javascript, ES6+, use the native fetch API to perform REST HTTP requests,
alternative is the npm axios library, check its documentation

you can use the fetch API its a promise based function different from python requests module
fetch('http://example.com/movies.json')
.then(response => response.json())
.then(data => console.log(data));
here are the docs
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

How to fix Cross-Origin Read Blocking when calling google maps elevation api by axios from Vue js?

I'm trying to to use google map api in vue js project.
I'm using two google maps services:
- the first is Time zone API => works fine
- the second is Elevation API => get a Cross-Origin Read Blocking
I verified the url works in postman
tried to use Ajax and vue-resource
DOESN'T WORK ELEVATION API
axios
.get(
`https://maps.googleapis.com/maps/api/elevation/json?locations=${latitude},${longitude}&key=APIKEY`)
.then(response => {
console.log(response);
return response.result.elevation;
})
.catch(error => {
console.log(error);
});
WORKS TIMEZONE API
axios
.get(
`https://maps.googleapis.com/maps/api/timezone/json?location=${place.latitude},${place.longitude}&timestamp=${moment().unix()}&key=APIKEY`)
.then(response => {
console.log(response);
return response.result.elevation;
})
.catch(error => {
console.log(error);
});
the result is :
-Access to XMLHttpRequest at 'https://maps.googleapis.com/maps/api/elevation/json?locations=51.49602489999999,-0.17026260000000093&key=APIKEY' from origin 'https://test.test' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
and a warning :
Cross-Origin Read Blocking (CORB) blocked cross-origin response https://maps.googleapis.com/maps/api/elevation/json?locations=51.49602489999999,-0.17026260000000093&key=APIKEY with MIME type application/json

This API is not for client-side consumption from script. You must use the Maps Javascript API Elevation Service.

Problems fetching a md file using javascript fetch()

I am currently developing a web app, where most of the content is written in markdown. So for handling this, I thought I could create a github repo to host all of the markdown files and then use the fetch() api to grab the files from github.
My code looks like so:
fetch('https://github.com/erasabi/trekthroughs/blob/master/pen_testing/RickdiculouslyEasy.md')
.then(response => response.blob())
.then(result => console.log(result));
I am getting this error though when I do that:
Failed to load https://github.com/erasabi/trekthroughs/blob/master/pen_testing/RickdiculouslyEasy.md: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Is there anyway to go about doing this? End result is once I fetch the markdown file's content I would like to use showdown or markedjs to convert the content into html for the site.

Figured it out basically you got to do something like this:
fetch('https://raw.githubusercontent.com/erasabi/trekthroughs/master/pen_testing/RickdiculouslyEasy.md')
.then(response => response.text())
.then(result => document.getElementById('content').innerHTML = marked(result));