前言

最近在周报系统和格子机项目中都出现了在测试服能够正常运行，部署到正式服之后就出现问题，这些问题的原因就是：一般测试服都没有安全性的需求，所以都是使用http协议。但是正式服现在一般都是使用更加安全的https协议。

问题

问题的关键就是在于这个协议的问题，浏览器默认是不允许在https里面调用http资源的。在这里根据我所遇到的情况大概是这样子的：

1. 在IE浏览器浏览器中使用链接加载资源时会弹出一个对话框：

2. 在微信的浏览器中引入图片资源时会报一个警告(但是图片会正常加载)：

3. 在https页面中向http地址发起ajax请求时，浏览器会阻止掉这个请求，然后报一个Mixed Content的错误。
4. 在https页面中使用webSocket时需要注意，必须使用wss协议才能够发起连接，不然也会报错：

问题分析

https协议与https协议的区别

在解决这个问题之前首先需要知道https是什么，与http的区别在什么地方。

https安全超文本传输协议：

它是一个安全通信通道，它基于HTTP开发，用于在客户计算机和服务器之间交换信息，它使用安全套接字层(SSL)进行信息交换，简单来说它是HTTP的安全版。它是由Netscape开发并内置于其浏览器中，用于对数据进行压缩和解压操作，并返回网络上传送回的结果。HTTPS实际上应用了Netscape的安全全套接字层（SSL）作为HTTP应用层的子层。（HTTPS使用端口443，而不是象HTTP那样使用端口80来和TCP/IP进行通信。）SSL使用40 位关键字作为RC4流加密算法，这对于商业信息的加密是合适的。HTTPS和SSL支持使用X.509数字认证，如果需要的话用户可以确认发送者是谁。总的来说，HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议要比http协议安全。

在URL前加https://前缀表明是用SSL加密的，你的电脑与服务器之间收发的信息传输将更加安全。 Web服务器启用SSL需要获得一个服务器证书并将该证书与要使用SSL的服务器绑定。

https与http的区别：

• https协议需要到ca申请证书，一般免费证书很少，需要交费。
• http是超文本传输协议，信息是明文传输，https 则是具有安全性的ssl加密传输协议。
• http和https使用的是完全不同的连接方式用的端口也不一样,前者是80,后者是443。
• http的连接很简单,是无状态的。
• HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议 要比http协议安全。

什么是混合内容（Mixed Content）

很明显上面报的错都是与Mixed Content是有关系的，Mixed Content就是：

当用户访问使用HTTPS的页面时，他们与web服务器之间的连接是使用SSL加密的，从而保护连接不受嗅探器和中间人攻击。

如果HTTPS页面包括由普通明文HTTP连接加密的内容，那么连接只是被部分加密：非加密的内容可以被嗅探者入侵，并且可以被中间人攻击者修改，因此连接不再受到保护。当一个网页出现这种情况时，它被称为混合内容页面。

详情可见：https://developer.mozilla.org/zh-CN/docs/Security/MixedContent

解决方案

相对协议

如果你的网站同时准备了https资源和http资源，那么使用相对协议可以实现根据当前网站的协议，浏览器自行选择通过https还是http发起请求，而相对协议也是非常简单的就是讲URL的协议(http、https)去掉。<img src="//domain.com/img/logo.png">

这里一定要注意必须是网站同时有https和http的资源才会有效，否则请求会失败，另外一般在正式服上线时都会刘改HOST地址，所以一般的ajax请求并不会出现问题，主要要注意的是一些单独的请求地址会出现这样的问题，如七牛云上传所使用的地址是单独的，所以有可能在正式服上线时没有注意到，另外就是使用websocket时检查一下正式服的socket地址是否是wss协议。

总结

这次第一个出现的问题是在周报系统七牛上传文件部分出现的，由于之前周报系统正式服可以通过http访问到，所以没有出现问题，但是最近正式服换成了https，就导致文件无妨上传，当时在碰到问题时感觉比较奇怪，明明测试服是正常的，为什么正式服会不正常，由于没有正式服的账号，所以调试的时候是在别人的电脑上面，当时控制台好像并没有打印报错信息（有可能是自己没有注意到），只是发现了在上传文件时的第二个请求无法发送出去，当时也并没有状态码（这里其实是请求根本就没有发送出去，被浏览器给block掉了）。所以在解决问题的时候并没有一个方向，最后是在老大的帮助下才了解到问题的所在的。

而在这一次问题中暴露出了一些问题，比如：

1. 在确定测试服正常的情况下自我感觉正式服应该不会有错，带着这样的心理去找问题就会忽视掉很多的细节问题。
2. 当时只是发现请求没发送出去，却没有去找请求发送失败的原因。
3. 没有去寻找控制台的报错信息（当时没有发现有错误信息，不知道是用户浏览器的问题还是自己疏忽了，这个是本次没有找到问题根源的关键所在），只是去关注了Network面板请求发送情况。

第二次是格子机的socket连接失败，这个问题主要是自己在拿到后端给的正式服socket地址时没有检查，没有发现地址的协议是ws的导致在测试时才发现这个问题，在以后拿到后端给的地址时还是需要检查一下再去使用。

参考资料

• 相对协议URL

作者简介：李成文，芦苇科技web前端开发工程师，擅长网站建设、微信公众号开发、微信小程序开发、小游戏制作、企业微信制作、H5建设，专注于前端框架、交互设计、图像绘制、数据分析等研究。

个人博客：LCW blog

欢迎和我们一起并肩作战： web@talkmoney.cn
访问 www.talkmoney.cn 了解更多

提供深圳微信公众号制作，广东钉钉开发，专业的企业微信外包，高性价比的微信小程序建设，靠谱的小游戏制作，高质量的H5开发