解决前后端分离项目部署SSL证书后前端页面出现的一些问题

#部署SSL证书后可能会遇到的问题

• 前段页面正常显示，访问不了后端接口
• 浏览器报错提示 the content must be served over https
• 接口地址换成https之后 又提示 net::ERR_SSLPROTOCOL_ERROR
• nginx配置反向代理到后端地址会出现 404访问不到页面

#解决办法

思路

浏览器提示在https页面不能发送http请求那就把http请求变成https请求

解决问题

• 为后端（我这里后端用的是springboot作为后盾）下载ssl证书，并部署，ssl证书可以到云服务商下载，下载时要根据自己后端的服务器下载，我这里用的是tocmat，下载对应的证书。

tocmat下载的证书里有两个文件一个是jks的秘钥文件（这个格式自己可以选择），还一个就是密码（如果申请ssl证书时没有设置它就会生成随机密码）把jks文件拷贝到资源目录

server:
  port: 8080 //这里是端口号（自定义）
  ssl:
    key-store: classpath:证书名称 //key-store是证书得路径 
    key-store-type: JKS  //证书格式，对应填写
    key-store-password: 密码 //填写生成的密码

启动之后就可以用https访问了，但http请求发送不了请求，想要同时想要http and https可以看下面(在启动类中配置)

@Bean
    public TomcatServletWebServerFactory tomcatServletWebServerFactory() {
        TomcatServletWebServerFactory factory = new TomcatServletWebServerFactory() {
            @Override
            protected void postProcessContext(Context context) {
                SecurityConstraint securityConstraint = new SecurityConstraint();
                securityConstraint.setUserConstraint("CONFIDENTIAL");
                SecurityCollection securityCollection = new SecurityCollection();
                securityCollection.addPattern("/*");
                securityConstraint.addCollection(securityCollection);
                context.addConstraint(securityConstraint);
            }
        };
        factory.addAdditionalTomcatConnectors(httpConnector());
        return factory;
    }

    @Bean
    public Connector httpConnector() {
        Connector connector = new Connector("org.apache.coyote.http11.Http11NioProtocol");
        connector.setScheme("http");
        //Connector监听的http的端口号
        connector.setPort(填写http端口);
        connector.setSecure(false);
        //监听到http的端口号后转向到的https的端口号
        connector.setRedirectPort(写https端口);
        return connector;
    }

#注意事项

Springboot配置ssl证书时可能会出错，遇到问题可以先mvn clear一下在次运行基本上都可以解决
配置完后本地运行访问https浏览器或postman测试工具会出现提示信息，因为你的ssl证书时绑定域名的，本地运行会提示不安全连接，这种情况忽略即可，上传服务器后不会出现

后端部署之后前段就可以向后端接口发送请求了

博客地址：徐启君的个人博客 xqijun.top