vite项目如何在本地启动https协议
- 本地启动正常配置在vite.config.js文件中默认启动http协议的请求,如何改成https呢?今天的开发中遇到了这个问题
- 项目需求: 本地启动https协议的前端页面并且正常访问后台https协议的接口
- 解决方法:
本地启动正常配置在vite.config.js文件中默认启动http协议的请求,如何改成https呢?今天的开发中遇到了这个问题
项目需求: 本地启动https协议的前端页面并且正常访问后台https协议的接口
解决方法:
1、获取到ssl证书秘钥和ca颁发机构,由于此项目用的是自建的ssl证书,所以没有ca证书,将这两个文件放到src根目录下路径为 ‘src/ssl/ssl_key.key’和’src/ssl/ssl_chain.crt’ 如下:
2、在vite.config.js文件中的server对象中添加如下配置
https: {
key: fs.readFileSync('src/ssl/ssl_key.key'),
cert: fs.readFileSync('src/ssl/ssl_chain.crt'),
},
3、由于此处使用的是自建的证书,没有ca颁发机构,Node.js默认不信任它,因此需要关闭证书验证:
proxy: {
'^/anylysis/.*': {
target: `https://${env.VITE_APP_BASE_API}:${env.VITE_APP_PORT}`, // 代理接口地址
changeOrigin: true,
rewrite: (path) => path.replace(/^\/anylysis/, ''),
secure: false, // 禁用 SSL 证书验证
},
},
致此解决问题,重新启动即可,全部配置如下:
server: {
// 服务配置
open: true, //配置自动启动浏览器 open: 'Google Chrome'-默认启动谷歌
port: 9201,
https: {
key: fs.readFileSync('src/ssl/ssl_key.key'),
cert: fs.readFileSync('src/ssl/ssl_chain.crt'),
},
proxy: {
'^/anylysis/.*': {
target: `https://${env.VITE_APP_BASE_API}:${env.VITE_APP_PORT}`, // 代理接口地址
changeOrigin: true,
rewrite: (path) => path.replace(/^\/anylysis/, ''),
secure: false, // 禁用 SSL 证书验证
},
},
},