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;
    }
}
相关推荐
m0_748238635 分钟前
Spring Boot项目接收前端参数的11种方式
前端·spring boot·后端
化作繁星21 分钟前
在 Vue 3 中,如何缓存和复用动态组件
前端·vue.js·缓存
一只小姜丝3321 小时前
解决各大浏览器中http地址无权限调用麦克风摄像头问题
网络·vue.js·网络协议·http
菜鸟阿达1 小时前
spring boot 2.7 + seata +微服务 降级失败问题修复
spring boot·后端·微服务
張葒兵3 小时前
记一次命令行启动springboot项目的问题 java -jar的问题
java·spring boot·jar
林的快手4 小时前
CSS默认样式
前端·css·vue.js·chrome·css3
林涧泣8 小时前
【Uniapp-Vue3】开发userStore用户所需的相关操作
前端·vue.js·uni-app
m0_748252389 小时前
Node.js HTTP模块详解:创建服务器、响应请求与客户端请求
服务器·http·node.js
皓月当空hy10 小时前
vue3中测试:单元测试、组件测试、端到端测试
vue.js