我们都知道HTTPS页面不能发送HTTP请求，那么是什么原因导致HTTPS页面发送HTTP请求失败呢？如果需要寄，怎么寄？最近刚遇到这个问题，找了半天也没找到靠谱的答案，才有了这篇文章。1.故事的由来在《Jquery ajax, Axios, Fetch区别之我见》中提到过，Fetch作为一种不同于XHR的请求方式，展现了它更多的API，并且有很好的符合ES规范的前景；更何况它还能支持POST跨域。刚好在工作中有一个使用post方法上报效果数据的需求。小手一挥，就不用麻烦后台兄弟们了。我可以处理它并用Fetch替换效果报告。过了一会，后台跑了过来，说还有一些其他HTTP站点上报的数据。我试了一下，移动端根本就没有发送这个请求，这...2.为什么HTTPS页面不能发送HTTP请求有人说是跨域问题，真的是这样吗？同源策略：1.同一个协议2.同一个域名3.同一个端口虽然在同源策略中HTTPS访问HTTP不遵循同一个协议，但是在现代浏览器中，即使请求同一个域name会报如下错误，而不是跨域报错。这也很好理解。毕竟混合内容的安全策略是由浏览器端决定的，能否跨域取决于服务端返回的Response头。请求被浏览器拦截，所以不存在跨域。问题。那么什么是混合内容呢？混合内容：初始HTML内容通过安全的HTTPS连接加载，但其他资源（例如图像、视频、样式表、脚本）通过不安全的HTTP连接加载[1]。因为通过HTTPS加载页面的初始请求是安全的，但是加载了不安全的HTTP内容，所以称为混合内容。因为HTTPS的S本身就是Secure的意思，所以现代浏览器一开始会对这类内容显示警告，告诉用户这个页面包含不安全的资源。但是即使显示了警告，页面已经加载并且用户的安全仍然存在风险。所以没过多久，Chrome和Firefox就直接屏蔽了这样的请求。这就是HTTPS页面无法发送HTTP的原因。2、突破方式虽然主流浏览器已经屏蔽了HTTPS页面的HTTP请求，但是我们仍然可以通过被动混合内容发送get请求。被动混合内容：指不与页面其余部分交互的内容，包括图片、视频和音频内容，以及其他无法与页面其余部分交互的资源。Activemixedcontent：指与页面交互的内容，包括脚本、样式表、iframe、flash资源以及浏览器可以下载并执行的其他代码。[1]由于攻击者可以通过不安全的HTTP内容攻击安全的HTTPS页面，因此此类请求会被严格阻止——这就是我们的Fetch请求被杀死的原因。所以我们可以在必要的时候使用img.src来发送请求。当然，请求方法只能是get。sendHttpRequest:()=>{constimg=newImage();img.src='http://xxx.com//你的请求'}这时候浏览器只会在控制台报警告，并不会阻止我们的请求。总结由于HTTPS的安全策略，浏览器会屏蔽HTTPS上的非安全请求（HTTP）请求，但是我们可以使用被动混合内容来跨越这个安全策略。参考文章：《什么是混合内容》
