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

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

1.创建自签名证书

2.添加证书

  • Vue开发环境下添加证书(vue.config.js文件)
    把SSL_test_key放在项目根目录下
js 复制代码
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同级目录下
sh 复制代码
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脚本
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

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脚本如下:
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')));

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 number
	host += ':'+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
java 复制代码
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;
	
    @Bean
    TomcatServletWebServerFactory tomcatServletWebServerFactory() {
        TomcatServletWebServerFactory factory = new TomcatServletWebServerFactory(){
            @Override
            protected 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 = new
                Connector("org.apache.coyote.http11.Http11NioProtocol");
        connector.setScheme("http");
        //监听http端口
        connector.setPort(httpPort);
        connector.setSecure(false);
        //转向https端口
        connector.setRedirectPort(httpsPort);
        return connector;
    }
}
相关推荐
王王碎冰冰5 小时前
基于 Vue3@3.5+跟Ant Design of Vue 的二次封装的 Form跟搜索Table
前端·vue.js
天蓝色的鱼鱼6 小时前
Element UI 2.X 主题定制完整指南:解决官方工具失效的实战方案
前端·vue.js
我是日安7 小时前
从零到一打造 Vue3 响应式系统 Day 8 - Effect:深入剖析嵌套 effect
前端·vue.js
DevUI团队7 小时前
🚀 MateChat V1.8.0 震撼发布!对话卡片可视化升级,对话体验全面进化~
前端·vue.js·人工智能
好好好明天会更好7 小时前
pinia从定义到运用
前端·vue.js
代码小学僧7 小时前
Vite 项目最简单方法解决部署后 Failed to fetch dynamically imported Error问题
前端·vue.js·vite
后端小张8 小时前
基于飞算AI的图书管理系统设计与实现
spring boot
东坡白菜8 小时前
SSE 实现 AI 对话中的流式输出
javascript·vue.js
猩兵哥哥12 小时前
前端面向对象设计原则运用 - 策略模式
前端·javascript·vue.js
EMT13 小时前
在 Vue 项目中使用 URL Query 保存和恢复搜索条件
javascript·vue.js