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

news2024/11/20 1:35:05

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 证书验证
        },
      },
    },

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1881888.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

微尺度气象数值模拟—WRF-LES大涡模拟;NDOWN工具使用;PALM编译、运行;PALM静态数据预备

针对微尺度气象的复杂性,大涡模拟(LES)提供了一种无可比拟的解决方案。微尺度气象学涉及对小范围内的大气过程进行精确模拟,这些过程往往与天气模式、地形影响和人为因素如城市布局紧密相关。在这种规模上,传统的气象模…

名企面试必问30题(十二)——简单介绍一下你的家庭情况

1.思路 对于面试官来说,他提出这个问题,只是为了深挖您的性格、稳定性、行事风格,包括未来定居规划、生育规划等基础信息,这是正常情况。您不要过多围绕其他家庭成员来讲,否则面试官无法获取他想要的,您也难…

新手第一个漏洞复现:MS17-010(永恒之蓝)

文章目录 漏洞原理漏洞影响范围复现环境复现步骤 漏洞原理 漏洞出现在Windows SMB v1中的内核态函数srv!SrvOs2FeaListToNt在处理FEA(File Extended Attributes)转换时。该函数在将FEA list转换成NTFEA(Windows NT FEA)list前&am…

2024新版大屏互动微信上墙源码大屏互动神器年会婚庆微现场3D签到

2024年大屏幕互动源码动态背景图和配乐素材搭建教程 php宝塔搭建部署活动现场大屏幕互动系统php源码,可以用来构建具有互动功能的大屏幕系统,为活动现场提供各种互动体验。 修复版的系统源码在原有功能的基础上,增加了更加完善的用户体验和稳…

【SGX系列教程】(二)第一个 SGX 程序: HelloWorld,linux下运行

文章目录 0. SGX基础原理分析一.准备工作1.1 前提条件1.2 SGX IDE1.3 基本原理 二.程序设计2.1 目录结构2.2 源码设计2.2.1 Encalve/Enclave.edl:Enclave Description Language2.2.2 Enclave/Enclave.lds: Enclave linker script2.2.3 Enclave/Enclave.config.xml: Enclave 配置…

深入理解Java核心技术模块化局部变量类型推断

本人详解 作者:王文峰,参加过 CSDN 2020年度博客之星,《Java王大师王天师》 公众号:JAVA开发王大师,专注于天道酬勤的 Java 开发问题中国国学、传统文化和代码爱好者的程序人生,期待你的关注和支持!本人外号:神秘小峯 山峯 转载说明:务必注明来源(注明:作者:王文峰…

Python计算n的阶乘的多种方法

1 问题 在课上,我们学习了用递归函数去计算一个自然数n的阶乘。但计算一个自然数n的阶乘是否就这一种方法呢? 2 方法 关于计算一个自然数n的阶乘,通过搜索,我们寻找到了除运用递归函数外的其他三种方法: 方法一 通过导…

【PyQt5】一文向您详细介绍 QLineEdit() 的作用

【PyQt5】一文向您详细介绍 QLineEdit() 的作用 下滑即可查看博客内容 🌈 欢迎莅临我的个人主页 👈这里是我静心耕耘深度学习领域、真诚分享知识与智慧的小天地!🎇 🎓 博主简介:985高校的普通本硕&…

树洞陪聊陪玩交友程序系统源码,解锁交友新体验

在繁忙的都市生活中,你是否渴望找到一片属于自己的秘密花园,倾诉心声、分享快乐?今天,就让我带你走进这片名为“树洞”的神秘之地,感受陪聊陪玩交友的全新魅力! 🌳树洞陪聊陪玩交友程序系统 你…

基于CST2024 Python内部环境的双锥天线自动3D建模和仿真

CST Studio Suite 2024版里面的Python相较于之前有了大的变化。 第一, 增加了cst.asymptotic ,cst.radar ,cst.units 三个包。 第二,之前CST python只能通过外部环境去操作,现在增加了内部环境控制,可以内…

修改element-ui日期下拉框datetimePicker的背景色样式

如图: 1、修改背景色 .el-date-picker.has-sidebar.has-time { background: #04308D; color: #fff; border: 1px solid #326AFF } .el-date-picker__header-label { color: #ffffff; } .el-date-table th { color: #fff; } .el-icon-d-arrow-left:before { color: …

MyBatis操作数据库(入门)

本节目标 使用MyBatis完成简单的增删改查操作,参数传递掌握MyBatis的两种写法:注解和XML方式掌握MyBatis相关的日志配置 前言 在应用分层学习中,我们了解web应用程序一般分为三层,即Controller、Service、Dao。在之前的案例中&a…

使用Nginx反向代理KKFileView遇到问题

使用KKFileView 4.0 以上版本 在KKFileView官网上,关于使用Nginx代理,建议配置如下 一、修改Nacos 在Nginx的conf文件夹中修改 nginx.conf ,新加 红框内的IP地址为代理服务器地址(即安装KKFileView的服务器地址) 二、修改KKFil…

计算机组成原理——寄存器

文章目录 1. 寄存器 2. 带寄存器的加法器 3. 时钟信号与计算速度 1. 寄存器 上一篇D触发器可以在时钟上沿存储1位数据。如果想存储多个位(bit)的数据,就需要用多个D触发器并联实现,这种电路称之为寄存器。 寄存器是计算机中央…

MySQL:表的内连接和外连接、索引

文章目录 1.内连接2.外连接2.1 左外连接2.2 右外连接 3.综合练习4.索引4.1见一见索引4.2 硬件理解4.3 MySQL 与磁盘交互基本单位(软件理解)4.4 (MySQL选择的数据结构)索引的理解4.5 聚簇索引 VS 非聚簇索引 5.索引操作5.1 创建索引5.2 查询索引5.3 删除索引 1.内连接 内连接实…

DreamView数据流

DreamView数据流 查看DV中界面启动dag,/apollo/modules/dreamview_plus/conf/hmi_modes/pnc.pb.txt可以看到点击界面的planning按钮,后台其实启动的是/apollo/modules/planning/planning_component/dag/planning.dag和/apollo/modules/external_command…

IT专业入门,高考假期预习指南

七月来临,各省高考分数已揭榜完成。而高考的完结并不意味着学习的结束,而是新旅程的开始。对于有志于踏入IT领域的高考少年们,这个假期是开启探索IT世界的绝佳时机。 一、基础课程预习指南 IT专业是一个广泛的领域,涵盖了从软件开…

Datawhale机器学习day-1

赛题 在当今科技日新月异的时代,人工智能(AI)技术正以前所未有的深度和广度渗透到科研领域,特别是在化学及药物研发中展现出了巨大潜力。精准预测分子性质有助于高效筛选出具有优异性能的候选药物。以PROTACs为例,它是…

服装分销的系统架构

背景 服装的分销规则:组织结构由总公司代理商专卖店构成。总公司全权负责销售业务,并决定给代理商的份额;代理商再给货到专卖店,整个组织机构呈现树状结构;上级机构对下级机构拥有控制权,主要控制其销售的服…

Entity Framework EF Migration 迁移

针对Code First来说关注的只有实体类。当需求变更时只需要添加新的实体类或者在实体类中添加、删除、修改属性即可。但是修改完成之后要如何将修改同步到数据库中? migration 机制就出现了 ●启用Migrations   ●通过Add-Migration添加Migration   ●Update-D…