• springboot项目配置ssl证书

    1.首先进入阿里云服务器，搜索ssl证书，免费申请，dns会自动解析该证书，所以不用设置

     2.下载tomcat和nginx服务器类型的证书

    3.将tomcat服务器类型的文件解压，打开，获得pfx文件，放入项目的resources文件中

    4.打开yml配置文件，进行SSL配置,并将http重定向到https

    1. custom:
    2.   http:
    3.     port: 8002 # 自定义http启动端口
    4.  
    5. server: # https端口
    6.   port: 8443
    7.   ssl:
    8.     key-store: classpath:8002091_suqiqaq.cn.pfx # pfk存放路径
    9.     key-store-type: PKCS12  # tomcat服务器类型默认
    10.     key-store-password: 1TFM7IpB # txt密码粘贴即可

      这里注意，server.port必须是https的端口，不然会出现https和http占用同一个端口

     5.添加配置类，让http重定向到https

    1. package com.guigusuqi.commonutils.config;
    2.  
    3. import org.apache.catalina.Context;
    4. import org.apache.catalina.connector.Connector;
    5. import org.apache.tomcat.util.descriptor.web.SecurityCollection;
    6. import org.apache.tomcat.util.descriptor.web.SecurityConstraint;
    7. import org.springframework.beans.factory.annotation.Value;
    8. import org.springframework.boot.web.embedded.tomcat.TomcatServletWebServerFactory;
    9. import org.springframework.context.annotation.Bean;
    10. import org.springframework.context.annotation.Configuration;
    11.  
    12. /**
    13.  * https配置，将http请求全部转发到https
    14.  */
    15. @Configuration
    16. public class HttpsConfig
    17. {
    18.  
    19.     @Value("${custom.http.port}")
    20.     private Integer httpPort;
    21.  
    22.     @Value("${server.port}")
    23.     private Integer httpsPort;
    24.  
    25.     @Bean
    26.     public TomcatServletWebServerFactory servletContainer() {
    27.         // 将http请求转换为https请求
    28.         TomcatServletWebServerFactory tomcat = new TomcatServletWebServerFactory() {
    29.             @Override
    30.             protected void postProcessContext(Context context) {
    31.                 SecurityConstraint constraint = new SecurityConstraint();
    32.                 // 默认为NONE
    33.                 constraint.setUserConstraint("CONFIDENTIAL");
    34.                 SecurityCollection collection = new SecurityCollection();
    35.                 // 所有的东西都https
    36.                 collection.addPattern("/*");
    37.                 constraint.addCollection(collection);
    38.                 context.addConstraint(constraint);
    39.             }
    40.         };
    41.         tomcat.addAdditionalTomcatConnectors(httpConnector());
    42.         return tomcat;
    43.     }
    44.  
    45.     /**
    46.      * 强制将所有的http请求转发到https
    47.      * @return httpConnector
    48.      */
    49.     @Bean
    50.     public Connector httpConnector() {
    51.         Connector connector = new Connector("org.apache.coyote.http11.Http11NioProtocol");
    52.         connector.setScheme("http");
    53.         // connector监听的http端口号
    54.         connector.setPort(httpPort);
    55.         connector.setSecure(false);
    56.         // 监听到http的端口号后转向到的https的端口号
    57.         connector.setRedirectPort(httpsPort);
    58.         return connector;
    59.     }
    60. }

    如果我们不想强制所有的请求都重定向到https或者某些功能接口需要http的支持等等，我们也可以同时开启http协议和https协议。

    1. package cn.zlc.servicehttps.config;
    2.  
    3. import org.apache.catalina.Context;
    4. import org.apache.catalina.connector.Connector;
    5. import org.apache.tomcat.util.descriptor.web.SecurityCollection;
    6. import org.apache.tomcat.util.descriptor.web.SecurityConstraint;
    7. import org.springframework.beans.factory.annotation.Value;
    8. import org.springframework.boot.web.embedded.tomcat.TomcatServletWebServerFactory;
    9. import org.springframework.context.annotation.Bean;
    10. import org.springframework.context.annotation.Configuration;
    11.  
    12. @Configuration
    13. public class HttpsConfig {
    14.  
    15.     @Value("${server.port}")
    16.     private Integer httpPort;
    17.     
    18.     @Bean
    19.     public TomcatServletWebServerFactory servletContainer() {
    20.         TomcatServletWebServerFactory tomcat = new TomcatServletWebServerFactory();
    21.         tomcat.addAdditionalTomcatConnectors(httpConnector());
    22.         return tomcat;
    23.     }
    24.  
    25.     @Bean
    26.     public Connector httpConnector() {
    27.         Connector connector = new Connector("org.apache.coyote.http11.Http11NioProtocol");
    28.         connector.setPort(httpPort);
    29.         return connector;
    30.     }
    31.  
    32. }
    33.

    如果我们通过http端口请求的话，不会自动重定向到https端口，而且也不会提示需要TLS端口请求。而使用https请求的时候就会提示不安全，如果是放到服务器上访问https就正常了；

    6.将SpringBoot项目打为Jar包放置到Linux服务器下

    如果是宝塔 记得把--server.port=8002删掉，这里yaml配置的是8443端口，不然会覆盖掉yaml的配置，导致https和http又公用了一个端口

    访问后端接口文档成功 

    6. 安全组放行443端口,这个端口类似于http的80端口

    7.配置 nginx ,使用域名进行访问 

    将前端的http协议,重定向到https协议，https协议默认是443端口，所以还需要在443端口进行配置，这里需要配置ssl证书路径

    1. server
    2. {
    3.     listen 80;
    4.     server_name suqiqaq.cn;
    5.     index index.php index.html index.htm default.php default.htm default.html;
    6.     # ssl证书路径
    7.     ssl_certificate     /home/cert/8002091_suqiqaq.cn.pem;
    8.     ssl_certificate_key /home/cert/8002091_suqiqaq.cn.key;
    9.     root /home/hospital/app-api/dist;
    10.    
    11.     # $request_uri #包含请求参数的原始URI，不包含主机名
    12.     # 如：”/foo/bar/arg”
    13.     # $server_name #服务器名称
    14.     # 将请求转成https，https协议默认是443端口，所以还需要在443端口进行配置
    15.     return 301 https://$server_name$request_uri;
    16. }

    在nginx主配置文件中监听443端口，并将请求反向代理到https协议的8443端口

    注意，这里需要把前端项目路径加上，不然宝塔一直提示没有该站点

    1. server 
    2. {
    3.   listen 443 ssl;
    4.   root /home/hospital/app-api/dist;
    5.   index index.php index.html index.htm default.php default.htm default.html;
    6.   server_name suqiqaq.cn;
    7.   ssl_certificate     /home/cert/8002091_suqiqaq.cn.pem;
    8.   ssl_certificate_key /home/cert/8002091_suqiqaq.cn.key;
    9.  location ^~ /hospitalApi/
    10.   {
    11.       proxy_pass   https://127.0.0.1:8443/;
    12.       # 这里是重点，如果上面的proxy_pass写成https的话这段是必须要配置的，不然只能访问页面，而页面调用端口不行
    13.     proxy_ssl_certificate     /home/cert/8002091_suqiqaq.cn.pem;
    14.     proxy_ssl_certificate_key /home/cert/8002091_suqiqaq.cn.key;
    15.     proxy_ssl_protocols       TLSv1 TLSV1.1 TLSv1.2;
    16.     proxy_ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
    17.     proxy_ssl_session_reuse  on;
    18.     proxy_redirect off;
    19.     proxy_set_header Host $proxy_host;
    20.     proxy_set_header X-Real-IP $remote_addr;
    21.     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    22.     proxy_set_header X-Nginx-Proxt true;
    23.     proxy_set_header HTTP_X_FORWORDED_FOR $remote_addr;
    24.    }
    25. }

    8.将前端的baseURL改为/hospitalApi，并把前端vue.config.js改为https协议，打包上线

    vue.config.js:

    1. 'use strict'
    2. const path = require('path')
    3. const defaultSettings = require('./src/settings.js')
    4.  
    5. function resolve(dir) {
    6.   return path.join(__dirname, dir)
    7. }
    8.  
    9. const name = defaultSettings.title; // page title
    10.  
    11. // If your port is set to 80,
    12. // use administrator privileges to execute the command line.
    13. // For example, Mac: sudo npm run
    14. // You can change the port by the following methods:
    15. // port = 9528 npm run dev OR npm run dev --port = 9528
    16. const port = 8080 // dev port
    17.  
    18. // All configuration item explanations can be find in https://cli.vuejs.org/config/
    19. module.exports = {
    20.   /**
    21.    * You will need to set publicPath if you plan to deploy your site under a sub path,
    22.    * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
    23.    * then publicPath should be set to "/bar/".
    24.    * In most cases please use '/' !!!
    25.    * Detail: https://cli.vuejs.org/config/#publicpath
    26.    */
    27.   publicPath: '/',
    28.   outputDir: 'dist',
    29.   assetsDir: 'static',
    30.   lintOnSave: process.env.NODE_ENV === 'development',
    31.   productionSourceMap: false,
    32.   devServer: {
    33.     port: port,
    34.     open: true,
    35.     overlay: {
    36.       warnings: false,
    37.       errors: true
    38.     },
    39.     https: true // 开启https协议
    40.     // before: require('./mock/mock-server.js')
    41.   },
    42.   configureWebpack: {
    43.     // provide the app's title in webpack's name field, so that
    44.     // it can be accessed in index.html to inject the correct title.
    45.     name: name,
    46.     resolve: {
    47.       alias: {
    48.         '@': resolve('src')
    49.       }
    50.     }
    51.   },
    52.   chainWebpack(config) {
    53.     // it can improve the speed of the first screen, it is recommended to turn on preload
    54.     config.plugin('preload').tap(() => [
    55.       {
    56.         rel: 'preload',
    57.         // to ignore runtime.js
    58.         // https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
    59.         fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
    60.         include: 'initial'
    61.       }
    62.     ])
    63.  
    64.     // when there are many pages, it will cause too many meaningless requests
    65.     config.plugins.delete('prefetch')
    66.  
    67.     // set svg-sprite-loader
    68.     config.module
    69.       .rule('svg')
    70.       .exclude.add(resolve('src/icons'))
    71.       .end()
    72.     config.module
    73.       .rule('icons')
    74.       .test(/\.svg$/)
    75.       .include.add(resolve('src/icons'))
    76.       .end()
    77.       .use('svg-sprite-loader')
    78.       .loader('svg-sprite-loader')
    79.       .options({
    80.         symbolId: 'icon-[name]'
    81.       })
    82.       .end()
    83.  
    84.     config
    85.       .when(process.env.NODE_ENV !== 'development',
    86.         config => {
    87.           config
    88.             .plugin('ScriptExtHtmlWebpackPlugin')
    89.             .after('html')
    90.             .use('script-ext-html-webpack-plugin', [{
    91.             // `runtime` must same as runtimeChunk name. default is `runtime`
    92.               inline: /runtime\..*\.js$/
    93.             }])
    94.             .end()
    95.           config
    96.             .optimization.splitChunks({
    97.               chunks: 'all',
    98.               cacheGroups: {
    99.                 libs: {
    100.                   name: 'chunk-libs',
    101.                   test: /[\\/]node_modules[\\/]/,
    102.                   priority: 10,
    103.                   chunks: 'initial' // only package third parties that are initially dependent
    104.                 },
    105.                 elementUI: {
    106.                   name: 'chunk-elementUI', // split elementUI into a single package
    107.                   priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
    108.                   test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
    109.                 },
    110.                 commons: {
    111.                   name: 'chunk-commons',
    112.                   test: resolve('src/components'), // can customize your rules
    113.                   minChunks: 3, //  minimum common number
    114.                   priority: 5,
    115.                   reuseExistingChunk: true
    116.                 }
    117.               }
    118.             })
    119.           // https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk
    120.           config.optimization.runtimeChunk('single')
    121.         }
    122.       )
    123.   }
    124. }

    request.js:

    1. import axios from 'axios'
    2. import { Message, MessageBox } from 'element-ui'
    3. import store from '../store'
    4. import { getToken } from '@/utils/auth'
    5. import {config} from "@vue/test-utils";
    6.  
    7. // 创建axios实例
    8. const service = axios.create({
    9.   // baseURL:process.env.VUE_APP_BASE_API,
    10.   baseURL: "/hospitalApi", // api 的 base_url
    11.   // baseURL: "http://suqiqaq.cn:8002", // api 的 base_url
    12.   timeout: 10000000 // 请求超时时间
    13. })
    14. // http://suqiqaq.cn:8002/doc.html#/%E8%8B%8F%E4%B8%83/%E7%99%BB%E5%BD%95%E7%AE%A1%E7%90%86/loginUsingPOST
    15. // request拦截器
    16. service.interceptors.request.use(
    17.   config => {
    18.     config.headers['Content-Type'] = "application/json;charset=utf-8";
    19.     if (store.getters.token) {
    20.       config.headers['Authorization'] = getToken() // 让每个请求携带token
    21.     }
    22.     return config
    23.   },
    24.   error => {
    25.     // Do something with request error
    26.     console.log(error); // for debug
    27.     Promise.reject(error)
    28.   }
    29. )
    30.  
    31. // response 拦截器
    32. service.interceptors.response.use(
    33.   response => {
    34.     /**
    35.      * code为非200是抛错 可结合自己业务进行修改
    36.      */
    37.     const res = response.data;
    38.     if (res.code !== 200)
    39.     {
    40.       Message({
    41.         message: res.message,
    42.         type: 'response error',
    43.         duration: 5 * 1000
    44.       });
    45.       // 408:非法的token; 400:其他客户端登录了;  401:Token 过期了;
    46.       if (res.code === 408 || res.code === 400 || res.code === 401)
    47.       {
    48.         if (getToken())
    49.         {
    50.           MessageBox.confirm(
    51.             '你已被登出，可以取消继续留在该页面，或者重新登录',
    52.             '确定登出',
    53.             {
    54.               confirmButtonText: '重新登录',
    55.               cancelButtonText: '取消',
    56.               type: 'warning',
    57.               duration: 5 * 1000
    58.             }
    59.           ).then(() => {
    60.             store.dispatch('FedLogOut').then(() => {
    61.               location.reload() // 为了重新实例化vue-router对象 避免bug
    62.             })
    63.           })
    64.         }
    65.       }
    66.       return Promise.reject('error')
    67.     } else
    68.     {
    69.       return response.data
    70.     }
    71.   },
    72.   error => {
    73.     console.log('err' + error) // for debug
    74.     Message({
    75.       message: error.message,
    76.       type: 'error',
    77.       duration: 5 * 1000
    78.     })
    79.     return Promise.reject(error)
    80.   }
    81. )
    82.  
    83. export default service

    把前端项目上传到服务器之后即可，搞定！

  • 相关阅读:
    全景应用程序监控
    计算机毕业设计选题推荐-springboot 企业在线培训系统
    三菱PLC中通过变址寄存器V或Z实现简单跑马灯的程序示例及说明
    超详细spring boot笔记
    通用收藏管理器Koillection
    广州蓝景分享—「web前端素材」使用CSS动画效果(上)
    MFC使用MScomm32.ocx控件实现串口通信
    windows服务器环境下使用php调用com组件
    浅谈双指针技巧（三）利用快慢指针，查找链表中指定位置节点
    程序员周刊（第4期）：程序员的财富观
  • 原文地址：https://blog.csdn.net/weixin_45974277/article/details/126064904