前言：
在现代 Web 应用中，二维码扫描功能变得越来越重要，尤其是在电商、物流和社交应用中。
Vue项目中常用的vue-qrcode-reader插件可以帮助我们轻松实现这一功能。然而，使用该插件时会遇到一个问题：浏览器仅允许在HTTPS环境下访问摄像头。本文将详细介绍 如何在
Vue项目中解决这一问题，并提供详细的步骤和代码示例。
一、背景
基于上一篇文章 vue实现移动端扫一扫功能（带样式） ，已经实现了移动端的扫一扫功能。然而，使用该插件时会遇到一个问题：浏览器仅允许在 HTTPS 环境下访问摄像头。
即在本地环境或 http 测试环境（包括在手机上用IP进行访问测试）中进行自测时，你会发现点击“扫一扫”功能时，页面无法正常打开。虽然在电脑端本地启动项目时此功能正常工作，但在移动端却无法使用。
这就会给我们在开发环境的调试环节带来不便。
在这里单独说一下解决方案，亲测有效。
二、vue-qrcode-reader 无法访问 HTTP 的原因
vue-qrcode-reader 插件在使用时会遇到一个常见的问题：在 HTTP 环境下无法访问摄像头。该插件仅适用于本地调试（如localhost，主要针对电脑端）或者带有https的域名，而在http环境下无法使用，因为调用摄像可能存在隐私风险）。这是由于浏览器的安全策略所导致的。以下是详细的原因和解释：
1. 浏览器的安全策略
现代浏览器为了保护用户隐私和安全，实施了一系列严格的安全策略。其中一个策略是 混合内容（Mixed Content） 阻止机制。混合内容是指在一个 HTTPS 页面中加载 HTTP 资源。为了防止敏感数据泄露，浏览器会阻止这种行为。
然而，即使在纯 HTTP 环境下，浏览器也有类似的限制。根据 W3C 的规范，访问用户媒体设备（如摄像头和麦克风）的功能被视为 敏感操作，需要在安全的上下文中进行。安全上下文通常指的是 HTTPS 环境或本地环境（如 localhost）。
2. 具体表现
- HTTP 环境：当你的应用运行在
HTTP环境下时，浏览器会阻止vue-qrcode-reader插件访问摄像头。尝试访问摄像头时，你会收到类似NotAllowedError或NotSupportedError的错误。 - 本地环境：在本地开发环境中（如
localhost），浏览器通常会放宽这些限制，允许访问摄像头。因此，在本地启动项目时，vue-qrcode-reader功能可以正常工作。
附上官网链接：vue-qrcode-reader
三、 解决方案
为了在生产环境中使用 vue-qrcode-reader 插件，你需要确保你的应用运行在 HTTPS 环境下。解决方案如下：
在Vue 框架中配置 HTTPS 开发环境
在开发环境中配置
HTTPS可以帮助你在本地测试时避免这些问题。
在 vue.config.js 文件中进行如下配置:
附上代码，：
devServer: {
// 配置反向代理，本地可访问https链接进行调试
proxy: {
'/api': {
target: 'https://192.168.137.78:8090/',
ws: true,
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
},
// 开启https 访问时使用https://192.168.137.78:8090
// https://localhost:8090 也能访问
https: true
},
配置完成之后重新运行，访问地址就会是 https 开头了。
四、总结
vue-qrcode-reader 插件在 HTTP 环境下无法访问摄像头的原因是浏览器的安全策略限制了敏感操作的执行。为了确保功能正常，建议在开发和生产环境中使用 HTTPS。通过配置 HTTPS 开发环境，可以有效地解决这一问题。
以上，希望对你有帮助！
