0. 踩坑

技术太菜不然也不会出现错误

申请到了证书之后，直接在 nginx 中设置了如下

http {
    
    # ...
    
    server {
        listen       443 ssl http2 default_server;
        listen       [::]:443 ssl http2 default_server;
        server_name  127.0.0.1;
        root         /home/blog; # 项目路径

        ssl_certificate {{你得到的 pem 文件路径}};
        ssl_certificate_key {{你得到的 key 文件路径}};
        ssl_session_timeout 5m;
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
        ssl_prefer_server_ciphers on;
        
        # ...
    }
    
    # ...
    
}

更新设置之后，通过 https 访问时，数据不显示

无法加载数据

打开控制台发现，数据不是没有获取而是由于安全不能加载

控制台警告

核查后发现是由于 https 安全连接不能显示未加密传输的不安全信息，因此问题的出现是发生在后端。

1. 后端代码

项目后端采用 Spring Boot 提供 api 接口

1.1 在项目 pom 文件中检查一下依赖是否存在

<dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

如果依赖不存在需要添加依赖，并且安装依赖

1.2 增加SSL配置

在 application.yml 中添加如下配置

server:
  # 此处为 https 端口
  port: 8080
  http:
    # 此处为 http 端口
    port: 8088
  ssl:
    # tomcat 证书文件路径
    key-store: classpath:{{证书名}}.pfx
    # 证书密码
    key-store-password: {{证书密码}}
    key-store-type: PKCS12

1.3 在项目中创建 Tomcat 配置类

在 config 的包中添加配置（不一定有固定位置，但是为尽量保持项目的整洁，可以创建一个包单独放置配置类）

package // 包路径以自己的项目为准

import org.apache.catalina.connector.Connector;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.boot.web.embedded.tomcat.TomcatServletWebServerFactory;
import org.springframework.boot.web.servlet.server.ServletWebServerFactory;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

@Configuration
public class TomcatConfig {

    @Value("${server.http.port}")
    private int httpPort;

    @Bean
    public ServletWebServerFactory servletContainer() {
        TomcatServletWebServerFactory tomcat = new TomcatServletWebServerFactory();
        tomcat.addAdditionalTomcatConnectors(createStandardConnector()); // 添加http
        return tomcat;
    }

    private Connector createStandardConnector() {
        Connector connector = new Connector("org.apache.coyote.http11.Http11NioProtocol");
        connector.setPort(httpPort);
        return connector;
    }
}

2. 前端代码

// api接口请求地址
  window.SITE_CONFIG['baseUrl'] = 'https://{{网址}}:8080/blog/'

前端代码的改动不多，唯一要注意的地方就是在实现后台接口访问的时候，一定要用和后台证书绑定的域名进行访问，如果直接使用 ip 地址访问时控制台会因为证书的签名不一致拒接加载数据

3. 总结

在部署 https 即 ssl 加密的时候，前端后端的代码都需要进行修改，仅仅更改前端的代码可能会导致后端数据没有相应的升级而无法显示数据。
不过，在查资料的过程中发现，似乎老版本的浏览器可以支持继续显示，但是我也没验证过。

网站升级 https 连接