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.
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 am writing a browser extension that should periodically receive the exchange rate in the JSON format and place it in local storage.
But when I try to do this in the code of a page of any site, I get error:
Access to XMLHttpRequest at 'https://my.server.domain/currency.txt' from origin 'https://developer.mozilla.org' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Sample request code
$updateUrl = "hhttps://my.server.domain/currency.txt";
$.get($updateUrl).done(function($updData) {
});
The only place where I can run a script like this is in popup.html, but I need updates to be triggered automatically.
I tried to do it through Background but in manifest v3 there is no such possibility anymore.
The only option is to periodically open the update.html extension page and perform updates in it, but this happens by opening a new tab, and I would like to do this in the background.
Any tips?
In general, I wrote this in background.js and it works
fetch("https://my.server.domain/currency.txt")
.then((response) => {
return response.json();
})
.then((data) => {
console.log(data);
});
It remains now to figure out how to make the script periodically update the data, otherwise it works only once. But that is another story.
I have this block of code that I'm testing to see if it'll send a tweet if it's button is clicked.
const onTweet = () => {
client.post('statuses/update', {status: 'Testing'})
.then(function (tweet) {
console.log(tweet);
})
.catch(function (error) {
console.log(error + " error")
});
}
However, every time I click on the button I get this exact error
Access to fetch at 'https://api.twitter.com/1.1/statuses/update.json' from origin 'http://localhost:1234' 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.
I've tried to research online to see how to fix it or work around it, but I don't think the solution I've found apply to my problem. For example, this post Access to fetch at from origin 'http://localhost:3000' has been blocked by CORS policy, says to set the mode to no cors but I don't think that applies to my problem since I'm not using CORS to post this tweet. This is in nodeJS and the backend was built with firebase and react router dom.
Also, if someone can link the official twitter api nodejs documentation I'd appreciate it. Haven't found it if there is any.
It looks like twitter API doesn't have CORS support . You may try workarounds like extensions or Postman/Curl etc as mentioned here -
https://stackoverflow.com/a/35898961/7895283
https://twittercommunity.com/t/will-twitter-api-support-cors-headers-soon/28276/6
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'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!