关于页面混合加载这件事

网站支持了HTTPS后，发现站点的图片加载不出来了。

排查

HTML代码

右键审查图片元素看到src属性上的地址为HTTP协议的完全路径，一时没感觉到有什么问题。

控制台

Network

检查浏览器的Network查看发出的请求，赫然发现Chrome浏览器对于图片却发出了HTTPS协议的请求，疑惑不解。

Console

发现Chrome在控制台上发出了一则警告

Mixed Content: The page at 'https://www.xxx.cn/about/' was loaded over HTTPS, but requested an insecure element 'http://www.xxx.cn:9090/files/-40536088dfc0eff_1663863204531.jpg'. This request was automatically upgraded to HTTPS, For more information see https://blog.chromium.org/2019/10/no-more-mixed-messages-about-https.html

看到这里明白了，Chrome这家伙认为不安全的，所以自动升级到了HTTPS协议，还贴上了链接可以去详细查看。

分析

由于我的网站是前后端不分离的应用，图片的处理要映射到应用端口，所以用了绝对路径。Chrome自动升级HTTPS的后果就是直接对应用端口进行了SSL连接，但我的应用并不支持SSL所以连接失败，导致了图片无法加载。

解决

已经知道了问题所在，围绕着HTTPS协议，有两个方案。

方案一 应用支持HTTPS协议

SpringBoot Web 内置Tomcat作为服务器，Tomcat是可配置的，SpringBoot内嵌版也是可配置的，可以通过Spring配置文件去设置相关属性，也可以同时支持HTTP/HTTPS协议。

方案二 修改地址的生成并反代HTTPS协议

修改应用关于地址的生成相关逻辑，屏蔽指向端口号。应用上层存在一个转发层，这里可以选用Nginx。

---

我这里选用了方案二，我支持HTTPS的方式是用Nginx进行反代的，而且我还想着下次一定把前后端给它分离出去…

验证

针对方案二，本地调式可以使用SpringCloud GateWay作为转发层，也可以使用Nginx，为了更贴合我机器上的环境，我使用了Nginx。

配置Nginx启动应用后，可以看到图片显示正常。