目录
1）为什么要配置SSL证书？
2）为什么阿里云OSS自定义域名也要配置SSL证书？
3）为什么WebSocket会报错呢？
解决方法
一、配置网站ssl证书
二、阿里云OSS自定义域名如何配置SSL证书
三、websocket失效后如何从ws换成wss
1）为什么要配置SSL证书？
SSL证书是数字证书的一种，类似于驾驶证、护照和营业执照的电子副本。因为配置在服务器上，也称为SSL服务器证书。
SSL证书通过在客户端浏览器和web浏览器之间建立一条SSL安全通道（Secure socket layer(SSL)，对传送的数据进行加密和隐藏；确保数据在传送中不被改变，保证数据的完整性，现已成为该领域中全球化的标准。由于SSL技术已建立到所有主要的浏览器和WEB服务器程序中，因此，仅需安装服务器证书就可以激活该功能了，即通过它可以激活SSL协议，实现数据信息在客户端和服务器之间的加密传输，可以防止数据信息的泄露，保证了双方传递信息的安全性，而且用户可以通过服务器证书验证他所访问的网站是否是真实可靠。
如今，大型正规网站随处可见均配置了SSL证书，以https协议进行交互，如阿里巴巴、京东、淘宝、百度等等，所以如果网站需要走向市场，就必须配置SSL证书。
2）为什么阿里云OSS自定义域名也要配置SSL证书？
因为在https的网站中，大部分浏览器是会限制访问http的，需要客户许可后才能进行访问，大大影响使用体验及网站效果。
3）为什么WebSocket会报错呢？
因为在https下应该使用wss协议做安全链接，而不是ws，且wss下不支持ip地址的写法，只能写成域名形式，如下图：
let ws = new WebSocket('ws://127.0.0.1:8081');
let wss = new WebSocket('wss://www.test.com');解决方法
一、配置网站ssl证书
（一）申请证书
证书申请 - FreeSSL.cn一个提供免费HTTPS证书申请的网站
1、这里因为是教学，所以选择3个月的就好了 
2、然后依次单击”订单管理-申请证书“；
3、因为是个人用，选一个非商业证书免费的就可以了 ；
4、这里的通用名称，最好把项目的域名及阿里云OSS的自定义域名一起放进去，共用一个SSL，不然你就要重复这一个步骤，然后提交申请；
5、点击”获取验证信息“，可以看到3个关键信息，依次将这3个信息，到【阿里云-域名解析-添加记录】中，对应粘贴进去保存即可，耐心等待证书签发下来，需要10几分钟后。
6、签发成功后，点击右侧【证书操作-下载证书】，因为阿里云OSS是nginx类型的，刚好我的项目也是nginx代理的，所以下载nginx版本的。 
（二）配置站点
下载后会有两个文件，一个是PEM文件，一个是KEY文件，在宝塔面板中，选择对应站点，点击【SSL】选项，先在【当前证书】中将下载的2个文件对应复制粘贴上去，然后提交，再点击【证书夹】，点击【部署】即可。这时候你的网站就会变成https了。
二、阿里云OSS自定义域名如何配置SSL证书
如果前面SSL证书域名没有带上这个自定义的子域名，就需要重新走一遍前面的申请证书流程
然后再去【阿里云OSS控制台--对象存储--Bucket--Bucket配置--域名管理】中，点击【证书托管】
依次点击【上传SSL证书--上传证书】，然后将对应文件上传，点击保存即可。上传完成后，就可以选择该证书，一般要等几分钟才会生效。
三、websocket失效后如何从ws换成wss
第一步，前端访问地址要做修改为wss连接。
let wss = new WebSocket('wss://你的域名/ws');第二步，直接使用wss的话，因为我的端口不是443，所以需要nginx转发一下；修改nginx的配置文件proxy_pass指向的是真实的端口。
location /ws{
proxy_pass http://120.XX.X.XXX:8082;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}第三步，这样就算能一切恢复正常，但是wss有一个机制，1分钟内连接没有任何操作会自动关闭前端的连接，所以需要一个心跳机制来维持连接，这里就不详细介绍了。
备注：如果wss获取用户的ip会因为nginx的代理原因，拿到的是自己服务器的ip地址，如需真实用户的ip的地址，可以在上一步中添加两行代码：文章来源：https://www.toymoban.com/news/detail-468223.html
location /ws{
proxy_pass http://120.XX.X.XXX:8082;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
#返回用户真实ip
proxy_set_header X-real-ip $remote_addr;
proxy_set_header X-Forwarded-For $remote_addr;
}然后在wss服务端，通过如下代码，获取真实用户ip文章来源地址https://www.toymoban.com/news/detail-468223.html
// 获取ip地址
const ip = req.headers['x-real-ip'] || req.connection.remoteAddress到了这里，关于配置域名SSL证书、阿里云OSS自定义域名的SSL证书，以及解决配置后WebSocket报错问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
