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));
Related
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?
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'm building a C++ backend with heavy calculations that are meant to work as an JSON API for connecting clients. To accomplish this, I've used HTTPServer in Poco::Net from POCO C++ Libraries.
Unfortunately when building two different clients it turned out that a regular webpage (HTML+JS) can't use Fetch to communicate with the backend due to CORS error. My understanding is that they need to use the same localhost: and that's not the case when manually opening the HTML document on the computer that's also running the backend.
All I can come up with when searching is the generic advice that servers need to enable CORS and whitelist relevant domains. Unfortunately I can't find documentation on how to accomplish this. The only relevant result was an answer on a related question where he recommended the following:
response.set("Access-Control-Allow-Origin", "*");
Naturally whitelisting everything isn't recommended from a security point of view but the main goal here is to just get it running locally to continue the development. Unfortunately it seems to make no difference and the browser console still says:
Access to fetch at 'http://localhost:6363/' from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: 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.
Hovering the error in the Chrome Network tab I get the following:
Cross-Origin Resource Sharing error: PreflightMissingAllowOriginHeader
My current JavaScript call:
const data = { test: 'test' }
fetch('http://localhost:6363', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
})
.then(response => response.text())
.then(message => {
console.log('Data retrieved:', message);
})
.catch((error) => {
console.error('Error:', error);
});
Any suggestions on how to proceed?
This question already has answers here:
No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API
(26 answers)
Closed 2 years ago.
I have been running news api on my website and testing in on my computer by dragging the file into the web browser, the url would show up like that file:///C:. Then I would upload any changes to my GitHub repository and run it on Github pages https://name.github.io/repository/.
Everything was working fine for a long time, but eventually, the API stopped working and error showed up in the console Access to fetch at 'https://newsapi.org/v2/everything?xx' from origin 'https://name.github.io' 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.
I have tried to add mode: 'no-cors' to the fetch, but it didn't work with return response.json();
My function looks like this:
const url = 'https://newsapi.org/v2/everything?' +
'qInTitle=""&' +
`from=` +
'language=en&' +
'apiKey=';
const req = new Request(url);
fetch(req).then(function(response) {
return response.json();
}).then(function(news) {
newsLoop(news);
});
The API stopped working also when I run it locally file:///C:, it displays a similar error to the one on Github pages Access to fetch at 'https://newsapi.org/v2/everything?xx' from origin 'null' 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.
How I can deal with it, so the API would display information on Github pages and when I run it locally on my pc?
You need a CORS proxy
const proxyUrl = "https://cors-anywhere.herokuapp.com/"
const qInTitle = "";
const from = "";
const apiKey = "";
const url = `${proxyUrl}https://newsapi.org/v2/everything?qInTitle=${qInTitle}&from=${from}language=en&apiKey=${apiKey}`;
const request = new Request(url);
fetch(request)
.then(response => response.json())
.then((news) => {
console.log(news);
})
.catch(error => {
console.log(error);
});
This is something that needs to be configured by https://newsapi.org.
It is their site, and with CORS they communicate how and which sites are allowed to embed their content. And most modern browsers follow those restrictions.
You best bet is to contact their support, or look at account settings, maybe you need to use some token or list your site somewhere.
Other than contacting https://newsapi.org and asking them for a licence / CORS change, i guess you could do a proxy server that duplicated their content, but that probably would break the terms of use.
I'm working on a project which I hoped would take random selections from the xeno-canto archive to create a 'virtual dawn chorus'
I'm doing this in javascript with the webAudio API. I have a list of samples and their urls such as
xeno-canto.org/sounds/uploaded/YQNGFTBRRT/XC144576-ABTO_BWRNWR_15Apr2013_Harter.mp3'
Which I'm tyring to load into an audio buffer. This is my 'loadAudio' function in javascript. I've successfully used this in other projects to get my audio - although that was from files hosted by myself
function loadAudio(url, loop, done) {
fetch(url, {'mode': 'no-cors'})
.then(response => response.arrayBuffer())
.then(arrayBuffer => context.decodeAudioData(arrayBuffer))
.then(audioBuffer => {
console.log('audio ' + url + ' loaded')
var sourceNode = context.createBufferSource()
sourceNode.buffer = audioBuffer
done(null, sourceNode)
sourceNode.start()
sourceNode.loop = loop
})
}
But on calling this function I get the error
Fetch API cannot load
xeno-canto.org/sounds/uploaded/YQNGFTBRRT/XC144576-ABTO_BWRNWR_15Apr2013_Harter.mp3.
No 'Access-Control-Allow-Origin' header is present on the requested
resource. Origin localhost:3000' 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.
I tried including fetch(url, **{'mode': 'no-cors'}**) in the function but then I get the error
(index):1 Uncaught (in promise) TypeError: Failed to fetch
Which I'm guessing is the same error, just the 'opaque' response.
Can anyone point me in the right direction? Or is it simply not possible to load in audio that I don't host on my own server? I saw a project that scraped random audio from SoundCloud without any problems (sorry can't post links as a newbie it's sebpiq's paulstretch example (on github)), but I admit I couldn't work out the code.
Please note above I had to remove http element from the start of links as I'm not allowed to post links yet.
Thanks!