vue.js 是什么让浏览器从http URL加载内容,即使前端源有https URL?

pn9klfpd  于 2023-11-21  发布在  Vue.js
关注(0)|答案(1)|浏览(141)

我的vue组件正在iframe中加载外部内容

<iframe src="https://external-site" />

字符串
在本地工作正常,但是一旦我部署到我的https站点,
混合内容:位于“https://my-site”的页面已通过HTTPS加载,但请求了不安全的帧“http://external-site”。此请求已被阻止;内容必须通过HTTPS提供。
网络选项卡显示2个请求,都有状态(已取消),并且都有请求URL是HTTPS。

62o28rlo

62o28rlo1#

对于一般情况,例如将没有尾随斜杠的URL重定向到添加了尾随斜杠的相应URL,某些服务器在重定向中硬编码了http:的配置-即使服务器有其他配置,随后将所有http URL重定向到https
例如,问题中的案例有一个URL https://tithe.ly/give?c=1401851(注意尾部缺少斜杠),它被重定向到http://tithe.ly/give/?c=1401851(注意http,no-https)。所以这就是浏览器停止并报告混合内容错误的地方。
在这种情况下,http://tithe.ly/give/?c=1401851重定向到https://tithe.ly/give/?c=1401851https)。因此,解决问题的方法是将源中的请求URL更改为https://tithe.ly/give/?c=1401851(包括尾随斜杠)。
如果你直接在浏览器中打开https://tithe.ly/give?c=1401851(没有尾随斜杠),这个答案中描述的重定向链只是透明地发生,所以它表面上看起来像原始URL是好的。这可能会让你困惑为什么它不起作用。
还有:当你在浏览器devtools中检查网络窗格时,它不会轻易地向你显示重定向链,因为如上所述,浏览器透明地遵循重定向-除非链具有非https URL,导致浏览器停止,中断链。
因此,针对这类问题的一般故障排除/调试技巧是:使用命令行HTTP客户端(如curl)检查请求URL,并逐步查看它报告的每个重定向,仔细查看Location响应头值;如下所示:

$ curl -i https://tithe.ly/give?c=1401851
…
location: http://tithe.ly/give/?c=1401851
…
$ curl -i http://tithe.ly/give/?c=1401851
…
Location: https://tithe.ly/give/?c=1401851

字符串

相关问题