Local weather app crossorigin.me not working

Local weather app crossorigin.me not working
0.0 0

#1

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.


#2

You need a weather api that is accessible through https.


#3

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


#4

@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.


#5

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 .


#6

You can try https://cors-anywhere.herokuapp.com/
I just looked at a working CodePen using it with openweathermap.org


#7

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


#8

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


#9

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