响应式网站一般怎么设计,王也天图片,碧桂园事件全过程,制作制作网站开发要配置https地址访问#xff0c;需要向服务器商申请和使用SSL证书。由于是测试阶段#xff0c;我们自己创建SSL证书#xff0c;叫作自签名证书。
1.创建自签名证书
Vue前端生成自签名证书我们用openssl 参考文章一 参考文章二SpringBoot后端生成自签名证书用JDK自带的keyt…要配置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.port8100
server.http.port80
server.ssl.key-storeclasspath:mykey.p12
server.ssl.key-store-password123456
server.ssl.key-aliastomcathttps如果是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;}
}
