Script Not Working over https

Question

This code works fine in the development machine and over http but when I change to https stops working Any help will be greatly appreciated

The code is from zippopotamus is use to get the city and state displayed in their respective input fields by first inserting the zipcode in its input field here I have a 2 div's that are hidden citybox statebox

when you insert the correct zip these boxes will show with the citybox and statebox

Edit The working code its now displayed here Thanks to all here and the suggestion provided by Anders Changing from http to https

$(document).ready( function()  {

  $("#citybox").hide();
  $("#statebox").hide();


  $('input#zip').bind("change keyup input",function() {
    var zip_in = $(this);
    var zip_box = $('#zipbox');

    if (zip_in.val().length<5)
    {

      zip_box.removeClass('has-error has-success');
    }
    else if ( zip_in.val().length>5)
    {

      zip_box.addClass('has-error').removeClass('has-success');
    }

    else if ((zip_in.val().length == 5) ) 
    {

      var urls =["https://api.zippopotam.us/us/" ,"https://api.zippopotam.us/pr/","https://api.zippopotam.us/vi/"];

      $.each(urls, function(i,u){ 
        $.ajax(u + zip_in.val(),{
          cache: false,
          dataType: 'json',
          type: 'GET',
          success: function(result, success) {
            // Make the city and state boxes visible

            $('#citybox').slideDown();
            $('#statebox').slideDown();

            // US Zip Code Records Officially Map to only 1 Primary Location for  abbreviation
            places = result['places'][0];
            $('#city').val(places['place name']);
            $('#state').val(places['state']);
            zip_box.addClass('has-success').removeClass('has-error');
          },
          error: function(result, success) {
            zip_box.removeClass('has-success').addClass('has-error');

          }
        });
      });
    }
  });
});

Answer 1

The problem is because you're reaching an insecure resource ( http://api.zippopotam.us/us/ ) from a secure environment (your site running on https). This is not allowed. Your options are:

• check if this server also runs on https;
• write some back-end code to invoke this service, working like a proxy;
• change to a vendor that supports https.

Answer 2

Zippopotam.us supports https for it's api. Change the urls to " https://api.zippopotam.us/ " and it should work.

Answer 3

Take a look at the Same-Origin Policy .

You can't make a request to another domain via HTTP if your site is running under HTTPS .

Thus you should use API via HTTPS or as @Jodevan said use your server as a proxy.