java springBoot +vue 项目配置https 访问

  背景：公司做了一个公众号的网页项目，这个项目主要是用户扫码，填写信息。分为用户端和管理端。后端用的java,前端用的vue,刚开始的时候，是http访问项目。可是，用户反应http 在url 上提示不安全，体验不好，所以吧http 访问改成https。

操作概要：

  首先说明一下，公司的服务器（windows），域名都是阿里云的。

  前端vue项目放在tomcat 中，后端打的jar包。因为这次操作主要是针对这种情况。

 首先去阿里云给对应的域名申请免费的ssl证书，证书有nginx  tomcat  apache 等。本次操作只使用了nginx的证书。通过ngxin 配置ssl证书，监听80 443 还有后端jar包的端口，进行请求的代理分发。

详细操作：

1 去阿里云的控制台输入ssl  购买免费证书。

 

 

 2 购买证书时候，进行审核（想要给什么域名添加https请求添加上去）。审核通过之后，下载nginx的证书。

 

 

 

 

  

3 服务器配置nginx 证书。

 3.1 在nginx 的根目录新建 cert 文件夹，然后把下载下载的nginx证书的解压之后的内容粘贴进去。

 3.2 nginx.cnf 配置文件的配置。  在conf 文件夹下，有个nginx.conf 文件，复制到本地，用notepad++或者别 的编辑器打开。打开之后，修改配置文件，我的配置文件修改之后，是这样，你可以参考着对自己的配置文件进行修改

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       80;         #http 默认请求端口80
        autoindex on;
        server_name  lele.vip  www.lele.vip;   # 你要https 访问的网站的域名
        index index.html index.htm index.jsp index.php;
        rewrite ^(.*)$ https://$host$1 permanent;   # 通过这行代码，可以强制http请求重定向到https请求
        
        location / {
                proxy_pass http://127.0.0.1:8080;     #本地tomcat 启动的8080端口
                proxy_set_header Host $host;                #下面这三行是固定格式的，可以直接粘贴上去，你要是非常懂，也可以改
                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;
                 }
        
    
        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

server {
 listen 443;       # https 请求默认走443端口
 server_name lele.vip www.lele.vip;    # 你要https 访问的网站的域名
 ssl on;
 root html;
 index index.html index.htm;
 ssl_certificate   cert/3198158_lele.vip.pem;      #放在conf目录下后为a.pem;  
 ssl_certificate_key  cert/3198158_lele.vip.key;     #放在conf目录下后为a.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;
  location / {
     #root html;
     #index index.html index.htm;
      proxy_pass http://127.0.0.1:8080;
      proxy_set_header Host $host;
      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;
 }
#  location ^~ /dayuhaitang {         #这个locatin 解开注释，nginx 就可以吧https://lele.vip/dayuhaitang 这个请求装发到 另一台服务器的上项目上 http://xxx.xx.xx.xx:80/dayuhaitang;
     #root html;
     #index index.html index.htm;
#      proxy_pass http://xxx.xx.xx.xx:80/dayuhaitang;
#      proxy_set_header Host $host;
#      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;
# }
 #location /xisanfengguang {
     #root html;
     #index index.html index.htm;
#      proxy_pass http://xxx.xx.xx.xx:80/xisanfengguang;
#      proxy_set_header Host $host;
#      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;
# }
 
}    
  
  #spring boot 项目的  https的配置    
    server {
       listen 8091;    # 监听端口  这端口是，前端 https://lele.vip:8091 的端口，因为nginx 监听这个端口之后，会占用这个端口。springboot 就开启8071 的端口就好，就是下面的proxy_pass http://127.0.0.1:8071;
        ssl on;
        server_name lele.vip www.lele.vip;    # 域名配置，可以多个
        
        ssl_certificate cert/3198158_lele.vip.pem;           # 证书地址
        ssl_certificate_key cert/3198158_lele.vip.key;       # 证书地址
        
         # 固定写法-------------
        ssl_session_cache   shared:SSL:1m;
        ssl_session_timeout 5m;
       ssl_protocols   TLSv1 TLSv1.1 TLSv1.2;
        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;

       # 这里配置反向代理的项目
        location / {
            proxy_pass http://127.0.0.1:8071;
            # 固定写法-------------
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
            proxy_set_header X-Forwarded-Port $server_port;
        }
    }
    
    #spring boot 项目的  https的配置
    server {
       listen 8092;    # 监听端口
        ssl on;
        server_name lele.vip www.lele.vip;    # 域名配置，可以多个
        
        ssl_certificate cert/3198158_lele.vip.pem;           # 证书地址
        ssl_certificate_key cert/3198158_lele.vip.key;       # 证书地址
        
         # 固定写法-------------
        ssl_session_cache   shared:SSL:1m;
        ssl_session_timeout 5m;
       ssl_protocols   TLSv1 TLSv1.1 TLSv1.2;
        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;

       # 这里配置反向代理的项目
        location / {
            proxy_pass http://127.0.0.1:8072;
            # 固定写法-------------
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
            proxy_set_header X-Forwarded-Port $server_port;
        }
    }

}

4 把springboot 项目打jar包放在服务器上。用java -jar +项目名启动。前端的vue项目放在tomcat中，启动。这样再访问网站时就是https了。

 关于nginx的配置可以参考以下文章：

nginx location 的配置  https://www.cnblogs.com/xiaoliangup/p/9175932.html

nginx 配置https https://www.cnblogs.com/zmsn/p/11644053.html

 以上两篇 文章 都是自己临时，找的，不懂的同学可以根据自己情况找点别 的文章。

 

5  项目中遇到的坑

  5.1  域名要解析到ip，后端被访问的端口要打开   刚开始的时候，前段的url是https://lele.vip:8096/xxx/xxx/xx     谷歌浏览器访问项目，项目有登陆功能，每次点击登陆按钮，都显示 Provisonal header are shown。 用火狐浏览器，访问就是 浏览器阻止了跨区域请求。

   第一次，遇到这个问题的时候，以为是跨域问题，自己检查了很多代码，后端明明配置了允许跨域，前端也做了部分的处理，怎么还是报跨域错误。请教大佬，大佬问我 你服务器的端口打开了吗？

   我用tcpinng 这个工具 测试 39.96.xx.xx:8091 端口是打开的。可是  lele.vip:8091 端口却是关闭的，才发现，是阿里云解析域名的时候，域名没有解析到ip。域名解析到这个ip 然后再在阿里云 的安全组那里放开后端需要访问的端口，项目才访问到。

 5.2  通过测试，发现多个tomcat 是可以用一套 ssl 安全证书的。因为刚开始的时候，想 的是直接在tomcat中配置https 访问，可是因为没有走通，折腾了一段时间，才使用的nginx 作为代理服务器。

 

6  工作总结：

  6.1  不要随便放弃吧。 说实话，在配置https的过程，当端口没有打开，可是自己一直在找跨域问题的时候，很长时间都没有任何进度都想放弃了。实在没有思路，可以出去散散步，然后和同事沟通一下，反而起到不错的效果。这次问题，能顺利解决，还是同事和一个大佬沟通，大佬慧眼如炬，一下子，就发现了问题所在。

 6.2  工具顺手，效率更高。