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  工具順手，效率更高。