Local weather app crossorigin.me not working

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 :confused: .

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

This works, thanks. Thread still open for solution using crossorigin.me.

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) {
      ...
    }
  });