如何使 XMLHttpRequest 在谷歌浏览器上通过 HTTPS 工作？

Posted 2023-03-03

【中文标题】如何使 XMLHttpRequest 在谷歌浏览器上通过 HTTPS 工作？

【英文标题】：How to make XMLHttpRequest work over HTTPS on google chrome?

【发布时间】：2013-01-14 11:00:20

【问题描述】：

我对此进行了很多研究，但找不到魔法。 其实我想填充城市密码的列表。使用 JQuery 自动完成 UI。这是一个https页面。它适用于 Firefox，但不适用于 Google Chrome。谁能帮我解决这个问题。提前致谢。

以下是我的代码：

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("");
            
        
    );

【参考方案1】：

如果您在 https 页面上，浏览器将阻止对非安全资源 (http) 的请求。 您应该经常看到一些关于此的通知。看起来其他浏览器默认不会阻止安全页面上的非安全 AJAX 请求，但 google chrome 会。

在您的代码中，您有硬编码的 URL：

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

如果是跨域请求并且支持 HTTPS，你可以这样修改：

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

如您所见，此处未指定协议。浏览器将采用页面默认协议（http 或 https）并使用它来请求数据。

【讨论】：

感谢您的回复。这对我不起作用。有没有其他办法。

对我不起作用是什么意思？这种方法不能用还是试过了还是不行？

实际上，正如我所见，ws.geonames.org 的 HTTPS 存在一些问题（尝试打开 ws.geonames.org/postalCodeSearchJSON） - 你会看到一个警告。假设这就是为什么 ajax 也不起作用的原因。在这里您可以找到有关此问题的更多信息：***.com/questions/12216208/…

你是我的英雄，我有一个托管在http和https上的站点，它通过ajax调用托管在同一域的api。 api URL 在网站的配置中，但我不知道如何根据访问网站的协议使用适当的协议。这很有魅力。谢谢！