vite项目如何在本地启动https协议
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 证书验证},},},