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

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

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

相关文章

Elasticsearch:Runtime fields - 运行时字段(二)

这是继上一篇文章 “Elasticsearch:Runtime fields - 运行时字段(一)” 的续篇。 在查询时覆盖字段值 如果你创建的运行时字段与映射中已存在的字段同名,则运行时字段会隐藏映射字段。在查询时,Elasticsearch 会评估运…

MySQL 8.0新特性INTERSECT和EXCEPT用于集合运算

MySQL8.0.31 新版本的推出,MySQL增加了对SQL标准INTERSECT和EXCEPT运算符的支持。 1、INTERSECT INTERSECT输出多个SELECT语句查询结果中的共有行。INTERSECT运算符是ANSI/ISO SQL标准的一部分(ISO/IEC 9075-2:2016(E))。 我们运行两个查询,第一个会列…

Python基础小知识问答系列-获取列表中最大或最小N个元素

1. 问题: 怎么从数值列表中获取最大或最小几个元素? 怎么从字典元素列表中,获取字典中某个值最大或最小的几个字典元素? 2. 解决方法: 使用heapq模块中的nlargest、nsmallest。 示例: import heapqtest_list [1, 3…

java基于ssm+vue 病人跟踪治疗信息管理系统

1病人功能模块 病人登录进入病人跟踪治疗信息管理系统可以查看首页、个人中心、病例采集管理、预约管理、医生管理、上传核酸检测报告管理、上传行动轨迹管理、病人治疗状况管理等内容。 病例采集管理,在病例采集管理页面可以查看账号、姓名、住院号、入院时间、病…

电通出席2024年世界经济论坛(WEF),重申推动可持续发展创新和人才培育的承诺

中国,上海——电通将出席世界经济论坛2024年新领军者年会(夏季达沃斯),本次大会将于6月25日至6月27日在中国大连举行。 2024年世界经济论坛主题为“未来增长的新前沿”,将聚焦于全球经济复苏、通胀缓解,以…

前端基础:JavaaScript(篇二)

目录 内置对象 String字符串 属性 代码 运行 方法 代码 运行 日期 代码 运行 Math 代码 运行 数组 定义 属性 代码 运行 方法 join(分隔符>) : 代码 运行 reverse(): 代码 运行 sort() : 代码 运行 事件 …

Elasticsearch实战教程: 如何在海量级数据中进行快速搜索

🎬 鸽芷咕:个人主页 🔥 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想,就是为了理想的生活! 引入 Elasticsearch(简称ES)是一个基于Apache Lucene™的开源搜索引擎,无论在开源还是专有领…

【SPIE独立出版】第四届智能交通系统与智慧城市国际学术会议(ITSSC 2024)

第四届智能交通系统与智慧城市国际学术会议(ITSSC 2024)将于2024年8月23-25日在中国西安举行。本次会议主要围绕智能交通、交通新能源、无人驾驶、智慧城市、智能家居、智能生活等研究领域展开讨论, 旨在为该研究领域的专家学者们提供一个分享…

SWOT视角洞察:一篇文章详解AI Agent发展

AI Agent自盖茨远见后火爆,吴恩达提出设计模式成创业圣经。其优势显著:技术门槛低,市场需求广,非技术人员可参与开发。然而,挑战亦不容忽视:技术成熟度需提升,数据安全和隐私保护待加强&#xf…

Linux shell编程学习笔记61: pstree 命令——显示进程树

0 前言 在 Linux shell编程学习笔记59: ps 获取系统进程信息,类似于Windows系统中的tasklist 命令https://blog.csdn.net/Purpleendurer/article/details/139696466?spm1001.2014.3001.5501 中我们研究了ps命令。在Linux中,通过ps命令&am…

【Hec-Ras】第一期:软件安装

Hec-Ras软件安装 1 HEC-RAS软件介绍2 HEC-RAS软件下载3 HEC-RAS软件安装4 HEC-RAS软件界面介绍参考 1 HEC-RAS软件介绍 HEC-RAS 是美国陆军工程兵团工程水文中心( Hydrologic Engineering Centers, HEC)开发的河道水力计算程序(River Analys…

go sync包(五) WaitGroup

WaitGroup sync.WaitGroup 可以等待一组 Goroutine 的返回,一个比较常见的使用场景是批量发出 RPC 或者 HTTP 请求: requests : []*Request{...} wg : &sync.WaitGroup{} wg.Add(len(requests))for _, request : range requests {go func(r *Reque…

WebSocket解决方案(springboot 基于Redis发布订阅)

WebSocket 因为一般的请求都是HTTP请求(单向通信),HTTP是一个短连接(非持久化),且通信只能由客户端发起,HTTP协议做不到服务器主动向客户端推送消息。WebSocket确能很好的解决这个问题&…

基于SpringBoot的漫画网站系统

你好呀,我是计算机学姐码农小野!如果有相关需求,可以私信联系我。 开发语言:Java 数据库:MySQL 技术:B/S架构模式、Java技术 工具:Visual Studio、MySQL数据库开发工具 系统展示 首页 用户…

零基础学习MySQL---MySQL入门

顾得泉:个人主页 个人专栏:《Linux操作系统》 《C从入门到精通》 《LeedCode刷题》 键盘敲烂,年薪百万! 一、什么是数据库 问:存储数据用文件就可以了,为什么还要弄个数据库呢? 这就不得不提…

如何在《语文新读写》期刊上发表论文?

如何在《语文新读写》期刊上发表论文? 《语文新读写》知网 省级G4 3版面4800字符数 24年10-11月 可版权页查稿 出刊晚5个月 《语文新读写》栏目:视点_本期特稿、视点_百家争鸣、探索_教材新探、探索_阅读风向、探索_写作杂谈、实践_教法学法、实践_教…

【python】OpenCV—Feature Detection and Matching

参考学习来自OpenCV基础(23)特征检测与匹配 文章目录 1 背景介绍2 Harris角点检测3 Shi-Tomasi角点检测4 Fast 角点检测5 BRIEF 特征描述子6 ORB(Oriented Fast and Rotated Brief) 特征描述子7 SIFT(Scale Invariant Feature Transform) 特征描述子8 SU…

Milvus ConnectionRefusedError: how to connect locally

题意:怎样在本地连接到 Milvus 数据库。连接 Milvus 数据库被拒绝的错误 问题背景: I am trying to run a RAG pipeline using haystack & Milvus. 我正在尝试使用 haystack 和 Milvus 运行一个 RAG(检索增强型生成)管道。 …

vue+element-ui简洁完美实现个人博客“​响石潭 ​”

目录 一、项目介绍 二、项目截图 1.项目结构图 2.首页 3.生活 ​编辑 4.文章详情 ​编辑 5.关于我 ​编辑 ​编辑 三、源码实现 1.项目依赖package.json 2.项目启动 3.首页源码 四、总结 一、项目介绍 本项目在线预览:点击访问 参考官网&#xff1…

腾讯 TRANSAGENTS: 多智能体翻译框架上线

之前介绍的由腾讯 AI 实验室搞得TRANSAGENTS(多 Agent 系统,模拟现实翻译出版流程)终于上线演示了!提供了基于 GPT-4o 的免费试用, 暂时还是期货开源。