vite项目如何在本地启动https协议

admin2024-07-03  16

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’ 如下:
vite项目如何在本地启动https协议,在这里插入图片描述,第1张

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 证书验证
        },
      },
    },
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明原文出处。如若内容造成侵权/违法违规/事实不符,请联系SD编程学习网:675289112@qq.com进行投诉反馈,一经查实,立即删除!