Hello,
My problem is with the second request failing saying blocked mixed request even though I used crossorigin and that it can’t parse the json response .
Thank you for your help.
Hello,
My problem is with the second request failing saying blocked mixed request even though I used crossorigin and that it can’t parse the json response .
Thank you for your help.
You need a weather api that is accessible through https.
got same problem here,
as solution i rewrited app 1) to use DarkSky API…
and another trick is 2) to try https://crossorigin.me before your URL -request:
https://crossorigin.me/http://api.weather…
in my solution, i combined both these methods
@christophherr Thank you, but I’d like to use this one and use crossorigin to access it through https.
@keith1111 Thanks but that’s the problem. Your solution works because you used an https api. Using an https weather api would clearly work, but I wanted to use a http one, through crossorigin. As you can see in my code, I used crossorigin before the url request but it still doesn’t work.
Hi,
Same issue still yesterday it was working with ip-api and openweather, but now its blocking so planning to start again the project with HTML5 geolocation api .
You can try https://cors-anywhere.herokuapp.com/
I just looked at a working CodePen using it with openweathermap.org
Hi,
Now that CodePen automatically changes all url with http to https, my local weather app wont work anymore.
I just added the https://cors-anywhere.herokuapp.com url to the http url of open weather map, it works but it is getting the weather of where https://cors-anywhere.herokuapp.com is hosted, instead of that of my current location.
Won’t this mean it is necessary to modify the app to accept a location name to look up weather for the given location ?
Thanks
Solution with cors DarkSky API.
JSONP should be used instead of JSON.
If you prefer use pure JS, then add fetch-jsonp library:
https://cdnjs.cloudflare.com/ajax/libs/fetch-jsonp/1.0.7/fetch-jsonp.min.js
and use it instead of fetch:
fetchJsonp(url).then(res => res.json()).then(data => {
...
});
or if you prefer jQuery use it this dataType: ‘jsonp’:
$.ajax({
url: url,
dataType: 'jsonp',
success:function(data) {
...
}
});