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

     2023-03-03     138

关键词:

【中文标题】如何使 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 在网站的配置中,但我不知道如何根据访问网站的协议使用适当的协议。这很有魅力。谢谢!

Json 文件不显示在谷歌浏览器中

...我尝试$.getJSONo时,我在Chrome的控制台中看到一个错误:XMLHttpRequest无法加载文件:///C:/AppServ/www/PFEl 查看详情

在谷歌浏览器中调试时如何终止脚本执行?

】在谷歌浏览器中调试时如何终止脚本执行?【英文标题】:HowtoterminatescriptexecutionwhendebugginginGoogleChrome?【发布时间】:2012-10-1912:58:15【问题描述】:在GoogleChrome调试器中单步执行JavaScript代码时,如果我不想继续,如何终止脚... 查看详情

如何在谷歌浏览器中禁用站点隔离?

】如何在谷歌浏览器中禁用站点隔离?【英文标题】:HowtodisableSiteIsolationinGoogleChrome?【发布时间】:2018-07-1307:57:42【问题描述】:Chrome67在Windows、Mac、Linux和Chrome操作系统上启用了SiteIsolation,这会增加10-13%的内存使用量,并给We... 查看详情

如何在谷歌浏览器中一步删除所有断点?

】如何在谷歌浏览器中一步删除所有断点?【英文标题】:HowtoremoveallbreakpointsinonestepinGoogleChrome?【发布时间】:2011-06-2115:47:28【问题描述】:使用版本11。[更新]现在有一个featurerequest。[更新]featurerequest已关闭(2011年12月)!【... 查看详情

如何在谷歌浏览器中设置兼容性视图

...在谷歌商店或者网上搜索下载谷歌插件IETab,然后打开谷歌浏览器,点击右上角地址栏后面的三条设置按钮。2、在下拉列表中选择“设置”。3、选择“扩展程序”选项。4、将下载好的文件夹中的IETab插件直接拖入谷歌浏览器中。5... 查看详情

websocket的客户端端口号如何在谷歌浏览器中获取

】websocket的客户端端口号如何在谷歌浏览器中获取【英文标题】:HowclientportnumberofwebsocketgetinGoogleChrome【发布时间】:2020-07-2911:40:38【问题描述】:在javascript中创建一个websocketconnect使用newWebSocket("ws://localhost:8080/ws")然后使用一个... 查看详情

在谷歌浏览器中如何测试js代码

点击谷歌浏览器右上角三个点点击更多工具点击开发者工具或者在浏览器页面空白处右击鼠标,点击检查上面两种方法都会显示以下信息:Elements:看到页面元素的样式等信息Console:终端的输出信息,在这个... 查看详情

在谷歌应用引擎的 laravel 过山车 cms 中使特定文件夹可写

...正在使用带有laravel自定义cms过山车cms的谷歌应用引擎。如何使以下文件夹可写?尝试了所有正常命令,chmod已授予权限检查上图【问题讨论】:您可能需要查看G 查看详情

如何去除input框在谷歌浏览器下的黄色底纹(代码片段)

  现象:谷歌浏览器下input框有默认记住功能,此时若选择了历史输入的内容,则变成如下图;非历史输入,是没有的。  方法一input:-webkit-autofill-webkit-box-shadow:000px1000pxwhiteinset;此法仅适用纯色背景;  方法... 查看详情

在谷歌浏览器中播放 avi 视频

】在谷歌浏览器中播放avi视频【英文标题】:Playavivideosingooglechrome【发布时间】:2017-03-2207:32:17【问题描述】:如何在chrome中播放avi视频?我的代码是<center><videocontrols><sourcesrc="plaque.avi"type="video/avi"></source></v... 查看详情

如何调试nodejs程序在谷歌浏览器

参考技术A该工具基于Electron将Node.js和Chromium的功能融合在了一起。它的目的在于为调试、分析和开发Node.js应用程序提供一个简单的界面。你可以使用npm来安装它:npminstall-gdevtool在某种程度上,我们可以用它来作为nodeshell命令的替... 查看详情

如何使一个动态导入命令从一个表到另一个在谷歌的表(代码片段)

我想建立一个工具,让我把一个给定格式的电子表格插入到sheet1中。然后它把一些数据插入到sheet2的指定位置。我现在使用的函数格式如下。=Sheet1!AI2对于每一列,我需要所有行的数据,即sheet1A1到sheet2B2,sheetA2到sheetB3......有几... 查看详情

使用 chrome 时如何在谷歌地图上制作多行标签?

...。它曾经与/n一起正常工作以换行。但是当我更改为chrome浏览器时,标签文本的/n根本不起作用.... 查看详情

网页无法在谷歌浏览器中正确保存

】网页无法在谷歌浏览器中正确保存【英文标题】:Webpagenotsavecorrectlyingooglechromebrowser【发布时间】:2013-11-0705:00:12【问题描述】:当我尝试使用“网页,完整”格式保存网页时,有一半时间它只保存包含样式表和图像的文件夹... 查看详情

iscroll在谷歌浏览器中的问题

...还有很多其他功能。不过,在使用iScroll的时候,在谷歌浏览器中出现不支持的情况,即,做移动的时候,出现卡顿或是每次只下拉或上拉几像素的问题。所以,,应该将PointerEvent关闭。那么什么是PointerEvent?又该如何关闭呢?... 查看详情

如何使网页的文字不能被复制

一、使用css  给body加上样式:user-select:none;二、使用js  document.oncontextmenu=newFunction("event.returnValue=false");  //在谷歌、edge等现代浏览器中禁止右键功能  document.onselectstart=newFunction("event.returnValue=false");  //对 查看详情

使折线水平显示在谷歌地图上并将其缩放到中心坐标

】使折线水平显示在谷歌地图上并将其缩放到中心坐标【英文标题】:Makepolylinetoshowongooglemaphorizontallyandzoomittocentercoordinate【发布时间】:2021-12-3022:51:39【问题描述】:我正在使用GoogleMapsAPIJavaScript。我的用例是我需要在地图上... 查看详情

在谷歌地图javascript api中 - 如何移动地图而不是标记

】在谷歌地图javascriptapi中-如何移动地图而不是标记【英文标题】:Ingooglemapsjavascriptapi-howtomovemapnotmarker【发布时间】:2022-01-2405:56:38【问题描述】:目前我有一个小项目需要使标记静态并将地图移动到地图上的标记显示-我希望... 查看详情