记一次网站全站http升级为https的过程,websocket : ws升级为wss遇到的问题等

简介: 记一次网站全站http升级为https的过程,websocket : ws升级为wss遇到的问题等

前言

项目开发差不多之后,部署到线上。总是提示网站连接不上私密连接,如图所示:

这是有的浏览器对http协议的连接认为不安全的原因,https协议更加安全,我们项目上线后也应该部署为https协议。下面整理一下我这次升级过程中遇到的问题以及是如何解决的!


 HTTPS:是以安全为目标的HTTP通道,简单讲是HTTP的安全版,即HTTP下加入SSL层,HTTPS的安全基础是SSL,因此加密的详细内容就需要SSL。 HTTPS协议的主要作用可以分为两种:一种是建立一个信息安全通道,来保证数据传输的安全;另一种就是确认网站的真实性。

1、申请ssl证书

我的项目是Springboot单体项目,后台管理系统thymeleaf+layui实现的,前台vue。相当于是前台分离,后台管理是单体服务,

这次是Java项目,而且用了SpringBoot,他内部集成了tomcat,看了SpringBoot配置起来好像也不是很方便。


HTTPS需要SSL证书,SSL证书的申请可以在阿里云、腾讯云申请免费的证书。

不过免费的大多 都是一年的,我在这里推荐一个公共并且免费的ssl证书:Let’s Encrypt


也看过这样一篇文章:

http不安全?改成https试试

还有这个:

SpringBoot 改造成https访问


无一例外,这种jdk生成的证书是不安全 的,虽然实现了https访问,但是实验https访问就是为了更安全,证书都不安全我们还用他来干啥,忽悠人那


因此就折中选择了Nginx做服务器,转发到Java项目,经过以前的几个项目,对Nginx 的基本用法和配置还是了然于胸的。


服务器上我部署了宝塔面板来可视化管理系统服务器,主要是方便,宝塔上创建站点可以申请免费的Let’s Encrypt ssl证书。

使用方式也很简单,选择域名,申请下来之后在“其他证书”页面点击保存就可以了,而且,到期还可以自动续期申请,多好!。

申请下来这个第一步算是完成了。

2、修改配置文件

用这种方式申请ssl之后,就会在站点的配置文件下自动配置上ssl的证书路径地址等。这里我也贴出来了,并且加上了一些注释,就算用其他证书手动配置也是一样的道理:

  #SSL-START SSL相关配置,请勿删除或修改下一行带注释的404规则
    #error_page 404/404.html;
    # 证书文件地址
    ssl_certificate    /www/server/panel/vhost/cert/admin.xxx.com/fullchain.pem;
    ssl_certificate_key    /www/server/panel/vhost/cert/admin.xxx.com/privkey.pem;
    # 协议配置
    ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;
    ssl_ciphers EECDH+CHACHA20:EECDH+CHACHA20-draft:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:!MD5;
    ssl_prefer_server_ciphers on;
    ssl_session_cache shared:SSL:10m;
    ssl_session_timeout 10m;
    add_header Strict-Transport-Security "max-age=31536000";
    error_page 497  https://$host$request_uri;
    #SSL-END

3、配置端口转发

  location / {
      # 配置代理转发主机名
       proxy_set_header Host $host;
       # 在服务器上获得用户的真实ip
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        # 配置转发的ip地址和端口号
        proxy_pass http://127.0.0.1:8082/;
        proxy_set_header X-Forwarded-Port $server_port;
     }

这是很重要的一步,这里不配置好前台就访问不到项目。到这里没有错误的话,重启一下Nginx 现在应该是可以进行访问了。


另外需要注意的是,部署了ssl之后,页面上的所有请求将会自动提升为https访问,所以前台项目vue中接口地址也要都改成https访问的,还有图片地址等等。


其中图片的话我这里用的是阿里云的OSS,OSS默认是支持https协议的,如果配置了自定义域名和cdn加速的话,需要对加速的域名也开启https协议访问,我这里的证书也是用宝塔的Let’s Encrypt申请的。

并且,前台页面中用到的oss的图片路径,也要全部更改为https的访问请求路径,要不然会报一大堆的警告:


Mixed Content: The page at ‘<URL>‘ was loaded over HTTPS, but requested an insecure frame ‘<URL>‘…

4、Nginx 配置域名支持 WSS

由于我的项目中使用了websocket协议,后台使用https协议的话会使ws协议报错,

Websocket使用 ws 或 wss 的统一资源标志符,类似于 HTTP 或 HTTPS ,其中 wss 表示在 TLS 之上的 Websocket ,相当于 HTTPS 了。如:

ws://example.com/chat

wss://example.com/chat

默认情况下,Websocket 的 ws 协议使用 80 端口;运行在TLS之上时,wss 协议默认使用 443 端口。其实说白了,wss 就是 ws 基于 SSL 的安全传输,与 HTTPS 一样样的道理。


如果你的网站是 HTTPS 协议的,那你就不能使用 ws:// 了,浏览器会 block 掉连接。


所以这个时候,需要Nginx 配置域名支持 WSS,


不用废话,直接在配置 HTTPS 域名位置加入如下配置:

location /websocket {
    proxy_pass http://backend;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
}

这样就完成了,在 HTTPPS 下以域名方式连接 WebSocket ,可以开心的玩耍了。


稍微解释一下 Nginx 配置

Nginx 自从 1.3 版本就开始支持 WebSocket 了,并且可以为 WebSocket 应用程序做反向代理和负载均衡。

WebSocket 和 HTTP 协议不同,但是 WebSocket 中的握手和 HTTP 中的握手兼容,它使用 HTTP 中的 Upgrade 协议头将连接从 HTTP 升级到 WebSocket,当客户端发过来一个 Connection: Upgrade 请求头时,Nginx 是不知道的,所以,当 Nginx 代理服务器拦截到一个客户端发来的 Upgrade 请求时,需要显式来设置 Connection 、 Upgrade 头信息,并使用 101(交换协议)返回响应,在客户端和代理服务器、后端服务器之间建立隧道来支持 WebSocket。


当然,还需要注意一下,WebSockets 仍然受到 Nginx 缺省为60秒的 proxy_read_timeout 的影响。这意味着,如果你有一个程序使用了 WebSockets,但又可能超过60秒不发送任何数据的话,那你要么需要增加超时时间,要么实现一个 ping 的消息以保持联系。使用 ping 的解决方法有额外的好处,可以发现连接是否被意外关闭。

5、发现的问题

nginx反向代理部署springboot项目报404无法加载静态资源:


由于我的后台管理系统是springboot单体项目,上面有给前台提供的接口服务,这个时候接口可以访问了,但是我的后台管理缺打不开了!!!。报错情况如下图所示:

很明显是静态资源无法访问了,


这就奇了怪了,为这个问题可花费了我不少时间检查各种配置,

检查上面端口转发,域名配置,springboot静态资源加载问题等等,

依然是不能访问。


没办法,出去呼吸下新鲜空气,

再回来看配置就发现Nginx下面还有这样一段配置,

    location ~ .*\.(js|css)?$
    {
         expires      12h;
         error_log /dev/null;
        access_log off; 
    }

然后再想想,这不是我项目里的静态资源没有被转发代理到我的项目端口下面么。于是:

改成如下配置,问题解决!

    location ~ .*\.(js|css)?$
    {
        # expires      12h;
        # error_log /dev/null;
        # access_log off; 
           #解决反向代理无法访问js,css
            proxy_pass http://127.0.0.1:8082;
            proxy_set_header   Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
            expires      12h; 
    }

有时候人那,不能一直坐在那,多出去走走,说不定第二天醒来昨天困扰一晚上的bug梦里就给解决了呢!

中间还发现一些小问题,就不记录了。

如果还有错别字,那也就这样吧…

目录
相关文章
|
2月前
|
人工智能 Java API
MCP协议重大升级,Spring AI Alibaba联合Higress发布业界首个Streamable HTTP实现方案
本文由Spring AI Alibaba Contributor刘军、张宇撰写,探讨MCP官方引入的全新Streamable HTTP传输层对原有HTTP+SSE机制的重大改进。文章解析Streamable HTTP的设计思想与技术细节,并介绍Spring AI Alibaba开源框架提供的Java实现,包含无状态服务器模式、流式进度反馈模式等多种场景的应用示例。同时,文章还展示了Spring AI Alibaba + Higress的完整可运行示例,分析当前实现限制及未来优化方向,为开发者提供参考。
|
26天前
|
安全 网络协议 Linux
Linux网络应用层协议展示:HTTP与HTTPS
此外,必须注意,从HTTP迁移到HTTPS是一项重要且必要的任务,因为这不仅关乎用户信息的安全,也有利于你的网站评级和粉丝的信心。在网络世界中,信息的安全就是一切,选择HTTPS,让您的网站更加安全,使您的用户满意,也使您感到满意。
65 18
|
1月前
|
网络安全 开发者
如何解决HTTPS协议在WordPress升级后对网站不兼容的问题
以上就是解决WordPress升级后HTTPS协议对网站的不兼容问题的方法。希望能把这个棘手的问题看成是学校的管理问题一样来应对,将复杂的技术问题变得更加有趣和形象,并寻觅出解决问题的方式。希望你的网站能在新的学期得到更好的发展!
60 19
|
1月前
|
JSON 安全 网络协议
HTTP/HTTPS协议(请求响应模型、状态码)
本文简要介绍了HTTP与HTTPS协议的基础知识。HTTP是一种无状态的超文本传输协议,基于TCP/IP,常用80端口,通过请求-响应模型实现客户端与服务器间的通信;HTTPS为HTTP的安全版本,基于SSL/TLS加密技术,使用443端口,确保数据传输的安全性。文中还详细描述了HTTP请求方法(如GET、POST)、请求与响应头字段、状态码分类及意义,并对比了两者在请求-响应模型中的安全性差异。
194 20
|
1月前
|
安全 网络协议 算法
HTTP/HTTPS与SOCKS5协议在隧道代理中的兼容性设计解析
本文系统探讨了构建企业级双协议隧道代理系统的挑战与实现。首先对比HTTP/HTTPS和SOCKS5协议特性,分析其在工作模型、连接管理和加密方式上的差异。接着提出兼容性架构设计,包括双协议接入层与统一隧道内核,通过协议识别模块和分层设计实现高效转换。关键技术部分深入解析协议转换引擎、连接管理策略及加密传输方案,并从性能优化、安全增强到典型应用场景全面展开。最后指出未来发展趋势将更高效、安全与智能。
68 1
|
2月前
|
安全 网络安全 数据安全/隐私保护
HTTP 与 HTTPS 协议及 SSL 证书解析-http和https到底有什么区别?-优雅草卓伊凡
HTTP 与 HTTPS 协议及 SSL 证书解析-http和https到底有什么区别?-优雅草卓伊凡
134 3
|
4月前
|
缓存 安全 网络安全
代理协议解析:如何根据需求选择HTTP、HTTPS或SOCKS5?
本文详细介绍了HTTP、HTTPS和SOCKS5三种代理协议的特点、优缺点以及适用场景。通过对比和分析,可以根据具体需求选择最合适的代理协议。希望本文能帮助您更好地理解和应用代理协议,提高网络应用的安全性和性能。
204 17
|
4月前
|
网络协议 安全 网络安全
HTTP与HTTPS协议入门
HTTP协议是互联网的基石,HTTPS则是其安全版本。HTTP基于TCP/IP协议,属于应用层协议,不涉及数据包传输细节,主要规定客户端与服务器的通信格式,默认端口为80。
121 25
HTTP与HTTPS协议入门
|
9月前
|
监控 安全 搜索推荐
设置 HTTPS 协议以确保数据传输的安全性
设置 HTTPS 协议以确保数据传输的安全性
|
6月前
|
网络协议 安全 网络安全
探索网络模型与协议:从OSI到HTTPs的原理解析
OSI七层网络模型和TCP/IP四层模型是理解和设计计算机网络的框架。OSI模型包括物理层、数据链路层、网络层、传输层、会话层、表示层和应用层,而TCP/IP模型则简化为链路层、网络层、传输层和 HTTPS协议基于HTTP并通过TLS/SSL加密数据,确保安全传输。其连接过程涉及TCP三次握手、SSL证书验证、对称密钥交换等步骤,以保障通信的安全性和完整性。数字信封技术使用非对称加密和数字证书确保数据的机密性和身份认证。 浏览器通过Https访问网站的过程包括输入网址、DNS解析、建立TCP连接、发送HTTPS请求、接收响应、验证证书和解析网页内容等步骤,确保用户与服务器之间的安全通信。
407 3