当前位置: 首页 > news >正文

SpringBoot Vue用自签名证书SSL配置https,http转发到https(整理文章)

要配置https地址访问,需要向服务器商申请和使用SSL证书。由于是测试阶段,我们自己创建SSL证书,叫作自签名证书。

1.创建自签名证书

  • Vue前端生成自签名证书我们用openssl
    参考文章一
    参考文章二
  • SpringBoot后端生成自签名证书用JDK自带的keytool
    参考文章一
    参考文章二
    参考文章三
  • 或者直接下载我生成好的自签名证书
    由于是自签名证书,所以访问https网址时有不安全提示是正常的,下载链接

2.添加证书

  • Vue开发环境下添加证书(vue.config.js文件)
    把SSL_test_key放在项目根目录下
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,devServer:{//设置https证书https:{key: './SSL_test_key/mykey.key',cert: './SSL_test_key/mycert.crt',},port:8080,//解决报错 chunk-vendors.js:1101 WebSocket connection to 'wss://192.168.0.10:8080/ws' failed: host: '0.0.0.0',client: {webSocketURL: 'ws://0.0.0.0:8080/ws',},headers: {'Access-Control-Allow-Origin': '*',},},
})
  • SpringBoot添加证书(application.properties文件)
    把mykey.p12放到application.properties同级目录下
server.port=8100
server.http.port=80
server.ssl.key-store=classpath:mykey.p12
server.ssl.key-store-password=123456
server.ssl.key-alias=tomcathttps
  • 如果是Vue打包,nodejs部署
    在dist文件夹同级目录创建server.js脚本
// 运行脚本:node server.js
const https = require('https');
const fs = require('fs');
const express = require('express');
const path = require('path');
const app = express();app.use(express.static(path.join(__dirname, 'dist')));app.get('*', function(req, res) {res.sendFile(path.join(__dirname, 'dist/index.html'));
});// 设置HTTPS服务器
const options = {key: fs.readFileSync('./SSL_test_key/mykey.key'), // 替换为你的SSL私钥路径cert: fs.readFileSync('./SSL_test_key/mycert.crt'), // 替换为你的SSL证书路径// ca: fs.readFileSync('path/to/your/xxx'), // 可选,替换为你的中间证书路径
};const port = process.env.PORT || 8080;
// 创建HTTPS服务器
https.createServer(options, app).listen(port); // 监听端口,HTTPS的默认端口是443 这里设置8080
console.log('Server started on port ' + port);

当前文件所在目录运行node server.js

3.设置访问地址

Vue的请求后端的地址需要修改。假设你已经用常量表示了。constants.js

export const AIOS_BASE_URL = "https://localhost:8100/api"
export const IMG_BASE_URL = "https://localhost:8100/upload/image/"

把http改成https就可以访问了,浏览器也是输入https前缀。

4、扩展:http请求转发到https

  • Vue nodejs http重定向到https
    坑1:有文章提到使用express-redirect,但会报不是中间件错误,
    坑2:使用路由跳转,会有执行顺序问题,加载静态资源与路由只会执行先出现的,后面的就不执行。
    最后用创建服务器时的地址跳转,成功同时加载dist静态资源,完整server.js脚本如下:
// 运行脚本:node server.js
const https = require('https');
const fs = require('fs');
const express = require('express');
const path = require('path');
const http = require('http');
const url = require('url');
const app = express();app.use(express.static(path.join(__dirname, 'dist')));//为所有路由提供单页应用的index.html,解决其它路径刷新时返回“Cannot GET”错误
app.get('*', function(req, res) {res.sendFile(path.join(__dirname, 'dist/index.html'));
});const port = process.env.PORT || 8080;//https端口//设置HTTP服务器
const httpServer = http.createServer((req, res) => {// 解析请求,获取路径const pathname = url.parse(req.url).pathname;let host = req.headers.host;host = host.replace(/\:\d+$/, ''); // Remove port numberhost += ':'+port;// console.log(host,pathname);// 重定向到HTTPS// res.writeHead(301, { 'Location': `https://${req.headers.host}${pathname}` });//如果http和https都是默认端口 80 443;就不用设置上面的host代码了,直接用这条代码res.writeHead(301, { 'Location': `https://${host}${pathname}` });res.end();
});
httpServer.listen(3000,()=>{console.log('HTTP Server started on port 3000');});//设置http端口为3000// 设置HTTPS服务器
const options = {key: fs.readFileSync('./SSL_test_key/mykey.key'), // 替换为你的SSL私钥路径cert: fs.readFileSync('./SSL_test_key/mycert.crt'), // 替换为你的SSL证书路径// ca: fs.readFileSync('path/to/your/xxx'), // 可选,替换为你的中间证书路径
};// 创建HTTPS服务器
https.createServer(options, app).listen(port); // 监听端口,HTTPS的默认端口是443 这里设置8080
console.log('HTTPS Server started on port ' + port);
  • SpringBoot请求转发(如果是SpringBoot直接处理网页请求的才需要)
    参考文章一
    参考文章二
    创建SpringBoot配置类Redirect2HttpsConfig
package com.zzz.simple_blog_backend.config;import org.apache.catalina.Context;
import org.apache.catalina.connector.Connector;
import org.apache.tomcat.util.descriptor.web.SecurityCollection;
import org.apache.tomcat.util.descriptor.web.SecurityConstraint;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.boot.web.embedded.tomcat.TomcatServletWebServerFactory;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;//SpringBoot配置http自动跳转到https
@Configuration
public class Redirect2HttpsConfig {@Value("${server.http.port}")private int httpPort;@Value("${server.port}")private int httpsPort;@BeanTomcatServletWebServerFactory tomcatServletWebServerFactory() {TomcatServletWebServerFactory factory = new TomcatServletWebServerFactory(){@Overrideprotected void postProcessContext(Context context) {SecurityConstraint constraint = new SecurityConstraint();constraint.setUserConstraint("CONFIDENTIAL");SecurityCollection collection = new SecurityCollection();collection.addPattern("/*");constraint.addCollection(collection);context.addConstraint(constraint);}};factory.addAdditionalTomcatConnectors(createTomcatConnector());return factory;}private Connector createTomcatConnector() {Connector connector = newConnector("org.apache.coyote.http11.Http11NioProtocol");connector.setScheme("http");//监听http端口connector.setPort(httpPort);connector.setSecure(false);//转向https端口connector.setRedirectPort(httpsPort);return connector;}
}

相关文章:

SpringBoot Vue用自签名证书SSL配置https,http转发到https(整理文章)

要配置https地址访问,需要向服务器商申请和使用SSL证书。由于是测试阶段,我们自己创建SSL证书,叫作自签名证书。 1.创建自签名证书 Vue前端生成自签名证书我们用openssl 参考文章一 参考文章二SpringBoot后端生成自签名证书用JDK自带的keyt…...

嵌入式人工智能(41-基于树莓派4B的串口蓝牙模块AT09-cc2541)

1、串口蓝牙模块AT-09 AT-09是一种串口蓝牙模块,可实现串口与蓝牙之间的数据传输。AT-09模块基于蓝牙4.0技术,具有低功耗、高传输速率和广泛的应用范围。 AT-09模块支持AT指令,通过串口与外部设备进行通信。用户可以使用AT指令对模块进行配…...

C++ 动态规划

子序列子串相关 单个指一个数组或字符串,两个指两个数组或字符串。 最长上升子序列-单个 dp[i]:以下标i为结尾的递增的最长子序列长度。 位置i的最长升序子序列等于j从0到i-1各个位置的最长升序子序列 1 的最大值。 class Solution { public:int l…...

回溯问题总结

一、子集问题 模板问题 给定一个序列[1,n],求这个序列的所有子集 输入描述&#xff1a; 一个正整数n(1 < n < 12) 输出描述&#xff1a; 每个子集一行&#xff0c;输出所有子集。 输出顺序为&#xff1a; &#xff08;1&#xff09;元素个数少的子集优先输出&#xff1b;…...

GraphRAG如何使用ollama提供的llm model 和Embedding model服务构建本地知识库

使用GraphRAG踩坑无数 在GraphRAG的使用过程中将需要踩的坑都踩了一遍&#xff08;不得不吐槽下&#xff0c;官方代码有很多遗留问题&#xff0c;他们自己也承认工作重心在算法的优化而不是各种模型和框架的兼容性适配性上&#xff09;&#xff0c;经过了大量的查阅各种资料以…...

.net # 检查 带有pdf xss

1.解决pdf含javasprct脚本动作&#xff0c;这里是验证pdf内部事件。相关pdf文件下载&#xff1a; 测试pdf文件 相关包 iTextSharp 5.5.13.4 iTextSharp using iTextSharp.text.pdf; using iTextSharp.text.pdf.parser;private Boolean IsPdfSafe(Stream stream){// PdfReader…...

【React】探讨className的正确使用方式

文章目录 一、className的正确用法二、常见错误解析三、实例解析四、错误分析与解决五、注意事项六、总结 在React开发中&#xff0c;正确使用className属性对组件进行样式设置至关重要。然而&#xff0c;由于JavaScript和JSX的特殊性&#xff0c;开发者常常会犯一些小错误&…...

打靶记录5——靶机hard_socnet2

靶机&#xff1a; https://download.vulnhub.com/boredhackerblog/hard_socnet2.ova目标&#xff1a; 取得root权限 涉及攻击方法 主机发现端口扫描SQL注入文件上传蚁剑上线XMLRPC命令执行逆向工程动态调试漏洞利用代码编写 方法 CVE-2021-3493缓冲器溢出漏洞 学习目标 …...

独立站+TikTok达人:自主营销与创意内容的完美结合

在全球电商市场迅猛发展的今天&#xff0c;独立站和TikTok达人的结合正在创造一种全新的电商营销模式。独立站作为电商平台&#xff0c;其自主性和灵活性为商家提供了广阔的发展空间&#xff1b;而TikTok达人凭借其独特的内容创作能力和庞大的粉丝基础&#xff0c;成为推动销售…...

【启明智显分享】适用于多功能养生壶、茶吧机的2.8寸触摸彩屏解决方案

健康生活理念不断深入人心&#xff0c;多功能养生壶、茶吧机等智能产品成为现代家庭的热门小家电。为推动智能家居个性化、多样化发展&#xff0c;启明智显推出了基于SC05 Plus 2.8寸触摸彩屏的多功能养生壶、茶吧机的解决方案&#xff0c;旨在提升养生壶与茶吧机的用户体验与操…...

WAF绕过技术(PKAV团队)

目录 主流WAF的绕过技术 Web容器的特性 1. IIS+ASP的神奇% 2. IIS的Unicode编码字符 3. HPP(HTTP Parameter Pollution): HTTP参数污染 4. 畸形HTTP请求 Web应用层的问题 1. 多重编码问题 2. 多数据来源的问题 WAF自身的问题 1. 白名单机制 2. 数据获取方式存在缺陷…...

『 Linux 』POSIX 信号量与基于环形队列的生产者消费者模型

文章目录 信号量概念POSIX 信号量基于环形队列的生产者消费者模型基于环形队列的生产者消费者模型编码实现基于环形队列的生产者消费者模型发送任务测试 信号量概念 信号量是一种用于多线程或多进程间同步的机制; 其定义是一个整形变量,本质上信号量可以看成是一个计数器,用来描…...

python中的字符串方法

python中的字符串 举个例子先 name = 貂蝉开大 #声明了一个字符串 print(name) # 打印了一个字符串 print(name[0:1] #输出貂蝉 print(name[2:3] #输出开大 扩展方法 find() # 查找字符串中某个字符的索引 index_ = name.find("貂") print(index_) # 输出 …...

python实现consul的服务注册与注销

我在使用consul的时候主要用于prometheus的consul服务发现&#xff0c;把数据库、虚拟机信息发布到consul&#xff0c;prometheus通过consul拿到数据库、虚拟机信息去采集指标信息。 此篇文章前提是已经安装好consul服务以后&#xff0c;安装consul请参考二进制方式部署consul…...

校园选课助手【2】-重要的登录模块

用户登录模块技术要点&#xff1a; 密码通过MD5加密传输分布式session存储用户登录信息自定义注解进行字段校验自定义拦截器完成登录验证 下面依次给出代码和详细解释&#xff1a; 1.使用 MD5 二次加密用户登录信息&#xff0c;前端先通过密码加上盐进行MD5加密交给服务器&a…...

4章2节:从排序到分组和筛选,通过 R 的 dplyr 扩展包来操作

dplyr是R语言中一个强大且高效的数据处理包,专门设计用于处理数据框(data frames)。它的语法简洁明了,操作高效,尤其适用于大数据集。dplyr提供了一系列函数,使得数据的筛选、变换、聚合和排序等操作变得简单直观。本文将详细介绍dplyr扩展包如何进行数据的排序到分组和筛…...

C语言实现 -- 单链表

C语言实现 -- 单链表 1.顺序表经典算法1.1 移除元素1.2 合并两个有序数组 2.顺序表的问题及思考3.链表3.1 链表的概念及结构3.2 单链表的实现 4.链表的分类 讲链表之前&#xff0c;我们先看两个顺序表经典算法。 1.顺序表经典算法 1.1 移除元素 经典算法OJ题1&#xff1a;移除…...

WSL和Windows建立TCP通信协议

1.windows配置 首先是windows端&#xff0c;启动TCP服务端&#xff0c;用来监听指定的端口号&#xff0c;其中IP地址可以设置为任意&#xff0c;否则服务器可能无法正常打开。 addrSer.sin_addr.S_un.S_addr INADDR_ANY; recv函数用来接收客户端传输的数据&#xff0c;其中…...

Android Gradle开发与应用(一):Gradle基础

文章目录 引言一、Gradle简介二、Gradle基础语法1. 项目结构2. 插件应用3. 仓库与依赖4. 任务&#xff08;Tasks&#xff09; 三、Gradle在Android项目中的深入应用1. 构建变体&#xff08;Build Variants&#xff09;2. 依赖管理3. 自定义构建逻辑 四、Gradle WrapperGradle W…...

Linux多线程服务器编程-1-线程安全的对象生命期管理

对象的生与死不能由对象自身拥有的mutex&#xff08;互斥器&#xff09;来保护. 如何避免对象析构时可能存在的race condi​t​ion&#xff08;竞态条件&#xff09;是C多线程编程面临的基本问题。 对象的销毁可能出现多种竞态条件(race condi​t​ion)&#xff1a; 在即将析构…...

业务系统对接大模型的基础方案:架构设计与关键步骤

业务系统对接大模型&#xff1a;架构设计与关键步骤 在当今数字化转型的浪潮中&#xff0c;大语言模型&#xff08;LLM&#xff09;已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中&#xff0c;不仅可以优化用户体验&#xff0c;还能为业务决策提供…...

day52 ResNet18 CBAM

在深度学习的旅程中&#xff0c;我们不断探索如何提升模型的性能。今天&#xff0c;我将分享我在 ResNet18 模型中插入 CBAM&#xff08;Convolutional Block Attention Module&#xff09;模块&#xff0c;并采用分阶段微调策略的实践过程。通过这个过程&#xff0c;我不仅提升…...

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”(装配)

船舶制造装配管理现状&#xff1a;装配工作依赖人工经验&#xff0c;装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书&#xff0c;但在实际执行中&#xff0c;工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...

Linux nano命令的基本使用

参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时&#xff0c;显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...

LangFlow技术架构分析

&#x1f527; LangFlow 的可视化技术栈 前端节点编辑器 底层框架&#xff1a;基于 &#xff08;一个现代化的 React 节点绘图库&#xff09; 功能&#xff1a; 拖拽式构建 LangGraph 状态机 实时连线定义节点依赖关系 可视化调试循环和分支逻辑 与 LangGraph 的深…...

SQL Server 触发器调用存储过程实现发送 HTTP 请求

文章目录 需求分析解决第 1 步:前置条件,启用 OLE 自动化方式 1:使用 SQL 实现启用 OLE 自动化方式 2:Sql Server 2005启动OLE自动化方式 3:Sql Server 2008启动OLE自动化第 2 步:创建存储过程第 3 步:创建触发器扩展 - 如何调试?第 1 步:登录 SQL Server 2008第 2 步…...

算法打卡第18天

从中序与后序遍历序列构造二叉树 (力扣106题) 给定两个整数数组 inorder 和 postorder &#xff0c;其中 inorder 是二叉树的中序遍历&#xff0c; postorder 是同一棵树的后序遍历&#xff0c;请你构造并返回这颗 二叉树 。 示例 1: 输入&#xff1a;inorder [9,3,15,20,7…...

2.3 物理层设备

在这个视频中&#xff0c;我们要学习工作在物理层的两种网络设备&#xff0c;分别是中继器和集线器。首先来看中继器。在计算机网络中两个节点之间&#xff0c;需要通过物理传输媒体或者说物理传输介质进行连接。像同轴电缆、双绞线就是典型的传输介质&#xff0c;假设A节点要给…...

Qt的学习(一)

1.什么是Qt Qt特指用来进行桌面应用开发&#xff08;电脑上写的程序&#xff09;涉及到的一套技术Qt无法开发网页前端&#xff0c;也不能开发移动应用。 客户端开发的重要任务&#xff1a;编写和用户交互的界面。一般来说和用户交互的界面&#xff0c;有两种典型风格&…...

【深尚想】TPS54618CQRTERQ1汽车级同步降压转换器电源芯片全面解析

1. 元器件定义与技术特点 TPS54618CQRTERQ1 是德州仪器&#xff08;TI&#xff09;推出的一款 汽车级同步降压转换器&#xff08;DC-DC开关稳压器&#xff09;&#xff0c;属于高性能电源管理芯片。核心特性包括&#xff1a; 输入电压范围&#xff1a;2.95V–6V&#xff0c;输…...