Mixed Content:the page at‘http:XXXX‘ was loaded over HTTPS

    技术2025-07-18  7

    问题:

    我这边是https的应用,需要请求另一台http应用的字体资源(woff或者ttf),然后报错:Mixed Content:the page at'http://XXXX' was loaded over HTTPS

    原因:

    HTTPS页面里动态的引入HTTP资源,会被直接block掉的.在HTTPS页面里通过AJAX的方式请求HTTP资源,也会被直接block掉。

    看到网上给的方式:

    第一种:自动将http的不安全请求升级为https

    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

    还有跟这个方案如出一辙的解决方案:(一个什么鬼草案的(Upgrade Insecure Requests 的草案 ))

    此时问题来了,我请求的ttf字体,确实可以升级成https的,但是由于证书为题会出现如下错误:

    net::ERR_CERT_AUTHORITY_INVALID 

    这个需要手动去点击一下,才能正常下载,但是字体效果总不能让用户去点击下载字体,再强刷浏览器显示效果吧。 

    网上给的第二种方案: 

    用nginx代理,这个确实能够解决,但是在项目本身没有使用nginx的情况下,专门为这个问题搞一个nginx有点“杀鸡焉用宰牛刀”的感觉了。

    我的解决方案:

    filter+proxy,过滤器拦截到需要请求的资源,应用中是要请求字体的,例:https://localhost:8084/WMS/ttf/yahei.ttf,但是这个字体是要去另一台http服务器请求的,本身肯定是不存在的,不出意外应该是会报404的。

    我们就在过滤器中强行修改response的内容,本来是要返回404的,我们在返回之前代理请求http的字体,然后修改response,把404替换成查出来的ttf,返回给浏览器,就能完美解决。

    上点代码:

    我是小菜鸟,只针对个人需求,描述有错误或者解决不了你们的问题,还请勿喷! 

    Processed: 0.010, SQL: 9