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?
Related
How can I get data from a server with no 'Access-Control-Allow-Origin' ?
I can get an Opaque answer only.
Problem is that I need to call a public API on a server with no Access-Control-Allow-Origin - I can try to convince site owner to add it, but how do I do it in the meantime ? I am trying to not run a proxy on my own domain. The data is personal data (electric power consumption), which I want the browser to download and process, and I do not want my server to see the users private API key, which is stored in localStorage only. At some point I want to it to become a true web app.
Fetch with no-cors mode gives me Opaque data, and with cors enabled I get:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.eloverblik.dk/. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing)
Any other way to call an API / Get data from a 3rd party site on the web ?
Here is example code:
fetch( 'https://www.eloverblik.dk', { method: 'GET', redirect: 'follow'})
.then( (response) => { console.log('x'); console.log('Resp: ' + response.type) })
.then((result) => { console.log('Res: ' + result )})
.catch( (error) => { console.error('Error:', error); })
Thanks for the help here.
Basically, the answer is, that it is not possible.
The workaround is to use a reverse proxy like nginx and add the header.
I have contacted the site owner and asked them to add the header. It is a public available API, that requires login with an API key you can generate on a website.
They do run another api server, giving anonymous access to public data. That one is run on cloudapp.net. The one where they "forgot" the header has personal electricity consumption measurements - Down to 15m intervals. It is hosted under t-msedge.net. Hope they will do the change, so I can do away with the proxy.
I'm making an autocomplete function for a webpage where users can find information about cities and their airports by typing the first letters of the city/airport name. I use javascript fetch for receiving all the active airports from the API:
let airports;
fetch("http://api.travelpayouts.com/data/ru/airports.json")
.then(data => data.json())
.then(data => airports = JSON.parse(data))
.catch(error => console.log(error.message));
It works locally but in case of jsfiddle.net i receive an error:
NetworkError when attempting to fetch resource.
I googled the problem but could only find the reason of such behavior and no solution so I end up with just hardcoding the response body into the fiddle. Any ways to fix it properly?
If you check the browser console, you will find this:
Mixed Content: The page at 'https://jsfiddle.net/' was loaded over HTTPS, but requested an insecure resource 'http://api.travelpayouts.com/data/ru/airports.json'. This request has been blocked; the content must be served over HTTPS.
You can't make a request from a site loaded over HTTPS to an insecure resource(http).
One work around while development would be to change the site settings on your browser by allowing insecure content.
I have a REST API hosted on heroku. It consists of Express, NodeJS and MongoDB(mongoose as orm and MongoDB Atlas as well). I am using MERN stack. Begginer here😅
The API Link: /api/todos
The API works just fine with Postman and VS code's API plugin. It also works perfectly fine on the localhost.
But when I try to GET/POST using axios, it gives Error: "Network Error"
But fetch() works just fine. So does Postman.
Also the I see cors warning in the console:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://mern-deploy-test-adib.herokuapp.com/api/todos. (Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘http://localhost:3000/’)
but I set the cors like so:
app.use(cors({ origin: 'http://localhost:3000/', credentials: true }))
Interestingly the API worked in localhost but after deploying it doesn't work with axios.
I have set cors origin: 'http://localhost:3000/'
And I checked the headers of both the fetch and axios GET request. They are literally the same.
The request header has Access-Control-Allow-Origin http://localhost:3000/
BTW my frontend is hosted on localhost:3000
So why is this happening?
Why is axios not working but fetch is.
Edit: here's the code for both axios and fetch request.
//fetch
fetch(`https://heroku-api-link/api/todos`)
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.log(err))
//axios
axios.get(`https://heroku-api-link/api/todos`)
.then(data => console.log(data))
.catch(err => console.log(err))
EDIT#2:
I tried an axios request using an editor on my phone (SPCK editor). The request was successful. I just don't get why it's not working from my pc.
I finally figured it out!!
Actually it's the origin link I set in cors. I set the origin to http://localhost:3000/. But interestingly the client origin (also http://localhost:3000/) didn't match the origin in the server.
But when I changed the server cors origin to http://localhost:3000, removing the '/' from the origin fixed the issue. I don't know why it didn't worked but I am glad it did. Now I need explanation why it worked. Is it something to do with specific route? Like adding the '/' makes it so that only the 'Home' route would work?
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));
I have multiple websites that have RSS XML feed, and I want to use it for my Web App. I tried using Axios function (showed below).
axios.get('https://www.15min.lt/rss/sportas')
.then((response) => {
loading = false;
this.dataReceived = response;
console.log(response);
})
.catch((error) => {
loading = false;
this.errorReceived = error;
console.log({ error });
});
But all I got back is
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
I tried to upload all project to the server because I found out that this error can be caused because of using it locally on the personal machine. But the result I got is the same, except instead of 'null' in error, I got my domain name.
I tried other Web App based on Vue.js to test or it's my side problem or website is just blocking any connection to RSS feed. But http://qreader.qcode.in web app worked with my links, and I'm sure it's possible to make it work. But I don't have an answer how to make it work.
In my project, I'm using Vue.js, Axios, and jQuery.
I found the easiest way myself. There is a website - https://cors.now.sh which helps to make these requests.
Just use it like in the example below:
XML Retrieve URL - https://cors.now.sh/https://example.com/rss-xml-link