0

I'm getting this error when I try to use $.get on a non-secure site (ie. http, not https):

jquery.min.js:4 Mixed Content: The page at '...' was loaded over HTTPS, but requested an insecure script 'http://api.openweathermap.org/data/2.5/weather?lat=50&lon=2?callback=jQuery...'. This request has been blocked; the content must be served over HTTPS.

I've been trying to think of work-around solutions to this. The problem is a fixed one, since the server is hosted by OpenWeather.org and it's a non-secure site (ie. http, not https).

This is my request code: $.get("https://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longitude + "&APPID=123456", function(data) { tempC = data.weather.main.temp / 10; // OpenWeather API returns Celsius * 10 rain = data.rain["3h"]; clouds = data.clouds.all; });

Simply changing the request URL to https://api.openweathermap.org... doesn't work, of course. Tried it and didn't work.

The only solution I can think of right now is to find another weather API that is free to use for my project, but I'd like to know if there's a way to still use OpenWeathermap's API, given that it's http. Curious to know this because it seems quite wasteful to have to dismiss certain APIs just because it's http and not https.

nickang
  • 2,198
  • 1
  • 12
  • 15
  • can you show your request-code? – JohnnyAW Jun 14 '16 at 10:47
  • btw, you are saying, that you call the request over HTTP, but the error-message clearly says, that the request was sent over HTTPS – JohnnyAW Jun 14 '16 at 10:49
  • Oh yes, forgot to include my request code. I've edited the original post with the code. @JohnnyAW yep, but the error message was referring to JSFiddle where I tested the code. The HTTPS refers to JSFiddle website. – nickang Jun 15 '16 at 09:08
  • but you are sending the request to "HTTPS" in your code??!! – JohnnyAW Jun 15 '16 at 09:34
  • wait, I think I understand your problem, you are providing your site through "https" and want to send a request to "http"-APi, and the browser responds with "Mixed Content", right? – JohnnyAW Jun 15 '16 at 10:04
  • @JohnnyAW sorry about that - the API URL that OpenWeather states to use is http, not https. I replaced it with https only when trying alternatives... but to be clear: the error message I got was when I used HTTP, not HTTPS. And yes - you're right. JSFiddle (and Coodepen) both are HTTPS sites, but I'm trying to obtain data from an API URL that is HTTP. That's probably why the error says "mixed content"! Didn't see it that way earlier. But the latter "content must be served over HTTPS" suggests that I can only GET from a secure (HTTPS) site. – nickang Jun 15 '16 at 13:32

2 Answers2

1

Found another post on SO about the same "mixed content" issue. It's helpful and points to many other resources to solve the problem.

The asker ended up dropping openweathermap API (because it's served over HTTP) and using forecast.io's API instead (served over HTTPS while still free).

Using Open Weather Map which is HTTP only through an HTTPS website and NOT get mixed content warning

Community
  • 1
  • 1
nickang
  • 2,198
  • 1
  • 12
  • 15
0

so, the Problem is, that you run your code on a HTTPS site(JSFiddle and Coodepen). Your browser will not allow HTTP-Connections on a HTTPS site for security-reasons. You can solve that issue by either forcing HTTP on the page where you run your code(try to run a code from a local file or localhost) or you could create a HTTPS -> HTTP forwarding on your server, that would receive a HTTPS request from your code and send a HTTP-request to API.

I would suggest first try to run from a localhost or local file(not sure if every browser will allow AJAX from a local file, but you can try before setting up localhost), that should work for you. If you just want to test the API you can simple copy the URL of the GET-request into you browser tab and execute it.

JohnnyAW
  • 2,866
  • 1
  • 16
  • 27
  • Thanks for the answer. So you're saying it's the fact that my code was running on a HTTPS secure server, and that my browser recognises that and refuses to pick up data from a non-secure HTTP server? I see. That makes sense. As for testing the URL, I've already done that successfully. The HTTP API URL works when directly pasted into my browser. I get a JSON object in return with the relevant data, as expected. – nickang Jun 16 '16 at 05:50
  • Does that mean that if my code runs on a HTTP server, and it runs a `$.get` from a HTTP server (via API call), it should be able to do so without problem? – nickang Jun 16 '16 at 05:53
  • @nickang, yes, you can setup localhost over HTTP and run your code without problems – JohnnyAW Jun 16 '16 at 07:14