How to make XMLHttpRequest work over HTTPS on google chrome?

Question

I researched about this a lot, but couldn't find the magic. Actually I want to populate a list of city pin code no. using JQuery autocomplete UI. It's a https page. It's working in Firefox but not in Google Chrome. Can anyone help me to resolve this issue. Thanks in Advance.

In the following is my code:

function zipAutoCompletet(prefix) {
    jQuery("#" + prefix + "_zip").autocomplete({
        source: function(request, response) {
            jQuery.ajax({
                url: "http://ws.geonames.org/postalCodeSearchJSON",
                dataType: "jsonp",
                data: {
                    style: "full",
                    maxRows: 12,
                    postalcode_startsWith: request.term
                },
                success: function(data) {
                    response(
                        jQuery.map(data.postalCodes, function(item) {
                            return {
                                label:
                                    item.placeName +
                                    (item.adminCode1
                                        ? ", " + item.adminCode1
                                        : "") +
                                    ", " +
                                    item.postalCode +
                                    ", " +
                                    item.countryCode,
                                value: item.postalCode
                            };
                        })
                    );
                    jQuery(".ui-autocomplete").css("width", "188px");
                }
            });
        },
        minLength: 2,
        select: function(event, ui) {
            var myString = new String(ui.item.label);
            var address = myString.split(",");

            jQuery("#" + prefix + "_city").val(address[0]);
            jQuery("#" + prefix + "_city").addClass("activated");
            jQuery("#" + prefix + "_city").trigger("change");
            jQuery("#" + prefix + "_city")
                .parents(".row")
                .removeClass("error-row");
            jQuery("#" + prefix + "_city")
                .parents(".row")
                .addClass("ok-row");

            var countryCode = address[3] ? address[3] : address[2];
            countryCode = jQuery.trim(countryCode);
            var countryName = jQuery(
                "#" +
                    prefix +
                    '_country option[value="' +
                    jQuery.trim(countryCode) +
                    '"]'
            ).text();
            jQuery("#countryContainer .jqTransformSelectWrapper span").html(
                countryName
            );
            jQuery("#countryContainer .jqTransformSelectWrapper").addClass(
                "selected-jqtranform"
            );
            jQuery("#" + prefix + "_country")
                .parents(".row")
                .addClass("ok-row");
            jQuery("#" + prefix + "_country")
                .parents(".row")
                .removeClass("error-row");
            jQuery("#" + prefix + "_country").val(jQuery.trim(countryCode));

            var stateCode = address[2] ? address[1] : "";
            stateCode = jQuery.trim(stateCode);

            if (countryCode == "US") {
                var base = base_url;
                base = base.replace("https", "http");

                jQuery.ajax({
                    url: base + "/getStateName",
                    dataType: "jsonp",
                    data: { stateCode: stateCode },
                    success: function(data) {
                        stateName = data;

                        jQuery("#jc_state").val(stateName);
                        jQuery("#jc_state").addClass("activated");
                        jQuery("#jc_state")
                            .parents(".row")
                            .removeClass("error-row");
                        jQuery("#jc_state")
                            .parents(".row")
                            .addClass("ok-row");
                        jQuery("#jc_state").trigger("change");
                        formValidate();
                    }
                });
            } else {
                stateName = stateCode;

                jQuery("#jc_state").val(stateName);
                jQuery("#jc_state").addClass("activated");
                jQuery("#jc_state")
                    .parents(".row")
                    .removeClass("error-row");
                jQuery("#jc_state")
                    .parents(".row")
                    .addClass("ok-row");
                jQuery("#jc_state").trigger("change");
                formValidate();
            }

            jQuery("#" + prefix + "_zip")
                .parents(".row")
                .addClass("ok-row");
            jQuery("#" + prefix + "_zip")
                .parents(".row")
                .removeClass("error-row");
        },
        open: function() {
            jQuery(this)
                .removeClass("ui-corner-all")
                .addClass("ui-corner-top");
        },
        close: function() {
            jQuery(this)
                .removeClass("ui-corner-top")
                .addClass("ui-corner-all");
        },
        change: function(event, ui) {
            if (ui.item === null) {
                jQuery("#" + prefix + "_zip")
                    .parents(".row")
                    .removeClass("ok-row");
                jQuery("#" + prefix + "_zip")
                    .parents(".row")
                    .addClass("error-row");
                $("#" + prefix + "_zip").val("");
            }
        }
    });
}

score 3 · Answer 1 · answered Jan 30 '13 at 15:44

3

If you are on https page, browser will block requests to non-secure resources (http). Regularly you should see some notification about that. Looks like other browsers does not block non secure AJAX requests on secured pages by default, but google chrome does.

In your code, you have hardcoded URL:

url: "http://ws.geonames.org/postalCodeSearchJSON",

If that is cross domain request and it supports HTTPS, you can change it like this:

url: "//ws.geonames.org/postalCodeSearchJSON",

As you can see, protocol is not specified there. Browser will take page default protocol (http or https) and use it to request data.

answered Jan 30 '13 at 15:44

Viktor S.

12,736
1
27
52

Thanx for the reply. This didn't work for me. Do you have any other way. – PHPLover Jan 30 '13 at 15:53
What do you mean under _didn't work for me_? You can't use this approach or you have tried it and it does not work? – Viktor S. Jan 30 '13 at 16:46
Actually, as I can see, ws.geonames.org has some problems with HTTPS (try to open https://ws.geonames.org/postalCodeSearchJSON) - you will see a warning. Suppose that is why ajax does not work also. Here you may find some more info about this issue: http://stackoverflow.com/questions/12216208/chome-now-blocking-all-jsonp-requests-from-https-to-http – Viktor S. Jan 30 '13 at 16:54
1

You are my hero, I have a site hosted on both http and https, which calls an api hosted at the same domain through ajax. The api URL is in the website's configuration but I couldn't work out how to make it use the appropriate protocol depending on which one the website was accessed with. This worked a charm. Thanks! – chillNZ Jun 20 '17 at 01:43
removing http/https doesn't work if you're loading on/from a https domain. For me at least. The script hangs at 'Connecting...'. This makes sense in the context of mixed content policy. It would never let you pass without knowing your protocol. – Grogu Feb 02 '22 at 04:06
@Grogu Not sure if I understand you. It always knows your protocol once page is loaded (ajax calls for sure). And when you specify no protocol - it will take a protocol of its current page this way avoiding issues with mixed content. I'm pretty sure you just have some other issue – Viktor S. Feb 02 '22 at 11:33
@ViktorS. : I'm using name.com to display a html website and a linux vps to host a Node https server on apache. I've secured the VPS with certbot successfully. The website communicates over sockets. If I do the way you suggest, the data never gets delivered to the website. To solve my issue I have to use HTTPS everywhere. It works now. – Grogu Feb 02 '22 at 19:18
@Grogu both this questions and my answer are related to standard HTTP/HTTPS calls. No idea how sockets handle this situation. Probably - they just don't folow regular rules. – Viktor S. Feb 03 '22 at 11:08

How to make XMLHttpRequest work over HTTPS on google chrome?

1 Answers1

Linked