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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

python学习-tuple及str

为什么需要元组 定义元组 元组的相关操作 元组的相关操作 - 注意事项 元组的特点 字符串 字符串的下标(索引) 同元组一样,字符串是一个:无法修改的数据容器。 如果必须要修改字符串,只能得到一个新的字符串&#xff…

如何对GD32 MCU进行加密?

GD32 MCU有哪些加密方法呢?大家在平时项目开发的过程中,最后都可能会面临如何对出厂产品的MCU代码进行加密,避免产品流向市场被别人读取复制。 下面为大家介绍GD32 MCU所支持的几种常用的加密方法: 首先GD32 MCU本身支持防硬开盖…

信息学一周赛事安排

本周比赛提醒 本周末有以下几场比赛即将开始: :::block-1 1.ABC-361 比赛时间:7月6日(周六)晚20:00 比赛链接:https://atcoder.jp/contests/abc361 3.CF-956(Div.2) 比赛时间:7月7日(周日…

【日常记录】【JS】获取用户IP地址及其他信息

1. 查询本机的IP地址 1.1 通过命令提示符 电脑按下 ctrl r ,输入 cmd 后按回车,打开命令提示符窗口输入命令: ipconfig ,然后按回车 下面这个红色框里面就是 ip地址 在输出结果中找到“无线局域网适配器 WLAN”或“以太网适配器…

python-切片、集合

序列是指:内容连续、有序,可使用下标索引的一类数据容器 序列的常用操作 - 切片 切片的语法 序列的常用操作 - 切片 注意切片的范围是左闭右开 为什么使用集合 集合的常用操作 - 修改 集合的常用操作 - 集合长度 集合常用功能总结 集合的特点

python小练习04

三国演义词频统计与词云图绘制 import jieba import wordcloud def analysis():txt open("三国演义.txt",r,encodingutf-8).read()words jieba.lcut(txt)#精确模式counts {}for word in words:if len(word) 1:continueelif word "诸葛亮" or word &q…

一个使用 g++ 模块化编译的 hello world 示例( Ubuntu 20.04 )

1. 确认 ubuntu 版本&#xff1a; 2. 文件夹结构&#xff1a; 3. 各个文件内容&#xff1a; 3.1. myadd.cpp&#xff1a; #include<iostream> using namespace std; int add_xxx( int a,int b ){int result a b;cout << a << " " << …

责任大,权力小:项目经理如何有效管理项目

成为项目经理&#xff0c;我们才会发现这份工作远非想象中那般轻松。在大多数企业中&#xff0c;项目经理更像是小团队中的舵手&#xff0c;需要在有限的权力和资源下&#xff0c;承担起巨大的责任&#xff0c;甚至不惜牺牲个人时间&#xff0c;加班至深夜。责任重大而权力有限…

解析MySQL的数据类型:理解每种类型及其应用

MySQL是一种流行的关系型数据库管理系统&#xff0c;被广泛应用于Web应用开发中。在数据库设计的过程中&#xff0c;选择合适的数据类型至关重要&#xff0c;因为它不仅影响存储效率和数据完整性&#xff0c;还影响数据库操作的性能和查询速度。本文将详细介绍MySQL支持的各种数…

职业技能大赛引领下人工智能专业实训教学的改革研究

在新时代背景下&#xff0c;人工智能&#xff08;AI&#xff09;作为科技发展的前沿领域&#xff0c;正以前所未有的速度影响着社会经济的各个方面&#xff0c;对高素质应用型AI专业人才的需求日益迫切。职业技能大赛作为检验和提升学生实践能力的重要平台&#xff0c;对于促进…

linux内存屏障

why? 为什么要有内存屏障&#xff0c;内存屏障主要解决什么问题 What? 内存屏障都有哪些 How? 内存屏障如何使用 本篇文章主要解决前两个问题 一、为什么要有内存屏障 我们都知道计算机运算任务需要CPU和内存相互配合共同完成&#xff0c;其中CPU负责逻辑计算&#xf…

HUAWEI MPLS 静态配置和动态LDP配置

MPLS(Multi-Protocol Label Switching&#xff0c;多协议标签交换技术)技术的出现&#xff0c;极大地推动了互联网的发展和应用。例如&#xff1a;利用MPLS技术&#xff0c;可以有效而灵活地部署VPN(Virtual Private Network&#xff0c;虚拟专用网)&#xff0c;TE(Traffic Eng…

将iStoreOS部署到VMware ESXi变成路由器

正文共&#xff1a;888 字 19 图&#xff0c;预估阅读时间&#xff1a;1 分钟 前面把iStoreOS部署到了VMware workstation上&#xff08;将iStoreOS部署到VMware Workstation&#xff09;。如果想把iStoreOS直接部署到ESXi上&#xff0c;你会发现转换镜像不能直接生成OVF或者OV…

巴比达内网穿透:重塑企业级数据通信的高效与安全边界

在当今数据驱动的时代&#xff0c;企业对于高效、安全、低延迟的数据传输需求日益迫切。巴比达&#xff0c;作为企业级内网穿透领域的佼佼者&#xff0c;凭借其自主研发的第九代核心引擎——WanGooe Tunnel&#xff0c;为企业带来了前所未有的通信体验。通过一系列技术创新与优…

亚马逊云科技AWS免费大热AI应用开发证书(含题库、开卷)

亚马逊云科技AWS官方生成式AI免费证书来了&#xff01;内含免费AI基础课程&#xff01;快速掌握AWS的前沿AI技术&#xff0c;后端开发程序员也可以速成AI专家&#xff0c;了解当下最&#x1f525;的AWS AI架构解决方案&#xff01; 本证书内容包括AWS上的AI基础知识&#xff0c…

强化学习-5 策略梯度、Actor-Critic 算法

文章目录 1 基于价值&#xff08; value-based \text{value-based} value-based &#xff09;算法的缺点2 策略梯度算法2.1 解释2.1.1 分母和分子相消2.1.2 对数函数的导数2.1.3 组合公式2.1.4 总结 3 REINFORCE算法4 策略梯度推导进阶4.1 平稳分布4.2 基于平稳分布的策略梯度…

家用洗地机什么牌子好?四款公认品牌好的机型推荐

每个人都希望自己的家里面能够干干净净&#xff0c;就算不是一尘不染&#xff0c;也至少应该是整洁的&#xff0c;但是在这个快节奏的大环境下&#xff0c;做清洁对于人们来说&#xff0c;不是没时间&#xff0c;就是太累了。正当此时&#xff0c;一款造福懒人的神器——家用洗…

IT行业入门,如何假期逆袭,实现抢跑

目录 前言 1.IT行业领域分类 2.基础课程预习指南 3.技术学习路线 4.学习资源推荐 结束语 前言 IT&#xff08;信息技术&#xff09;行业是一个非常广泛和多样化的领域&#xff0c;它包括了许多不同的专业领域和职业路径。如果要进军IT行业&#xff0c;我们应该要明确自己…

python-数据容器对比总结

基于各类数据容器的特点&#xff0c;它们的应用场景如下&#xff1a; 数据容器的通用操作 - 遍历 数据容器的通用统计功能 容器的通用转换功能 容器通用排序功能 容器通用功能总览

GIT - 一条命令把项目更新到远程仓库

前言 阅读本文大概需要1分钟 说明 更新项目到远程仓库只需要执行一条命令&#xff0c;相当的简便 步骤 第一步 编辑配置文件 vim ~/.bash_profile第二步 写入配置文件 gsh() {local msg"${1:-ADD COMMIT PUSH}"git add . && git commit -m "$m…