当前位置： 首页 > news >正文

vite项目配置本地开发使用https访问

news 来源：原创 2024/9/21 0:36:45

在Vite项目中启用HTTPS以安全地使用navigator.mediaDevices.getUserMedia()

引言

在现代Web开发中，保护用户隐私和数据安全是至关重要的。特别是在涉及到媒体捕获功能，如使用用户的摄像头或麦克风时，Web应用需要遵循严格的安全准则。navigator.mediaDevices.getUserMedia() 方法允许网页直接访问用户的媒体输入设备，但出于安全考虑，这一功能通常要求在HTTPS环境下运行。如果你正在使用Vite作为你的开发服务器，并希望在本地开发过程中测试这一功能，那么配置Vite以支持HTTPS访问就变得尤为重要。

为什么需要HTTPS？

  • 安全性：HTTPS通过SSL/TLS协议加密了客户端和服务器之间的通信，防止了数据在传输过程中被窃听或篡改。
  • 兼容性：许多现代Web API，包括getUserMedia()，都要求在HTTPS环境下才能使用，以确保用户数据的安全。
  • 信任：使用HTTPS可以增强用户对网站的信任，特别是对于需要处理敏感信息的网站。

Vite项目中配置HTTPS

我是借鉴这位大佬的用了它的第一中方式，在此记录一下：vite项目配置本地开发使用https访问，3分钟搞定

方案1

使用插件@vitejs/plugin-basic-ssl

  1. 安装
pnpm i @vitejs/plugin-basic-ssl
  1. 在vite.config.js中配置
    在这里插入图片描述
    重启项目，就会有https的地址
    在这里插入图片描述

相关文章：

  • 北京网站建设多少钱？
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • vue3页面空白-普通函数和箭头函数提升的不同
  • 探索Python世界的趣味之旅：自制贪吃蛇游戏
  • 【Python123题库】#大学排行榜分析 #数据统计 #罗马数字转换
  • 【leetcode详解】一个小组的最大实力值【中等】
  • 如何用RoBERTa高效提取事件文本结构特征：多层次上下文建模与特征融合
  • Spring全局异常处理HandlerExceptionResolver使用
  • lambda c++/java/kotlin
  • 鸿蒙（API 12 Beta6版）图形【使用Text模块实现文本显示】方舟2D图形服务
  • 【运维监控】influxdb 2.0+telegraf 监控tomcat 8.5运行情况（1）
  • 「Python」assert 断言使用方法
  • 滚雪球学MyBatis-Plus(09)：乐观锁与性能优化
  • 【js逆向专题】2.浏览器调试技巧
  • 网吧业务安全对抗(有源码)
  • vant UI之van-tab如何实现标题两行显示
  • vue3 前端实现pdf打印预览 printjs
  • 【刷算法】求1+2+3+...+n
  • conda常用的命令
  • Elasticsearch 参考指南（升级前重新索引）
  • es6要点
  • ESLint简单操作
  • SOFAMosn配置模型
  • Zsh 开发指南（第十四篇 文件读写）
  • 浅谈Golang中select的用法
  • 如何使用 OAuth 2.0 将 LinkedIn 集成入 iOS 应用
  • 教程：使用iPhone相机和openCV来完成3D重建（第一部分） ...
  • #if #elif #endif
  • $.ajax()
  • （1）svelte 教程：hello world
  • （4）Elastix图像配准：3D图像
  • (C++哈希表01)
  • (el-Date-Picker)操作(不使用 ts)：Element-plus 中 DatePicker 组件的使用及输出想要日期格式需求的解决过程
  • （Pytorch框架）神经网络输出维度调试，做出我们自己的网络来！！（详细教程~）
  • （八）Docker网络跨主机通讯vxlan和vlan
  • （不用互三）AI绘画工具应该如何选择
  • （二）PySpark3：SparkSQL编程
  • （二）WCF的Binding模型
  • (分布式缓存)Redis分片集群
  • (附源码)计算机毕业设计SSM疫情下的学生出入管理系统
  • （四）c52学习之旅-流水LED灯
  • （四）事件系统
  • （转）Spring4.2.5+Hibernate4.3.11+Struts1.3.8集成方案一
  • * CIL library *(* CIL module *) : error LNK2005: _DllMain@12 already defined in mfcs120u.lib(dllmodu
  • .form文件_一篇文章学会文件上传
  • .net core + vue 搭建前后端分离的框架
  • .NET Reactor简单使用教程
  • .NET 快速重构概要1
  • .net实现头像缩放截取功能 -----转载自accp教程网
  • [ C++ ] STL---stack与queue
  • [ 攻防演练演示篇 ] 利用通达OA 文件上传漏洞上传webshell获取主机权限
  • [] 与 [[]], -gt 与 ＞ 的比较
  • [2013AAA]On a fractional nonlinear hyperbolic equation arising from relative theory
  • [20150629]简单的加密连接.txt
  • [2016.7.test1] T2 偷天换日 [codevs 1163 访问艺术馆（类似）]
  • [2019/05/17]解决springboot测试List接口时JSON传参异常
  • [ACP云计算]易混淆知识点(考题总结)