VS Code Live Server部署网页 移动端Web蓝牙无法配对BLE设备

触发了Web Bluetooth API的安全上下文强制限制：

• Chrome的安全上下文判定规则：仅本地回环地址（localhost、127.0.0.1）、HTTPS站点、file://本地文件会被认定为可信安全环境，只有这类环境下才会开放navigator.bluetooth接口
• 你用Live Server部署的页面，PC端通常是通过localhost:端口访问，被Chrome识别为安全上下文，因此Web Bluetooth可用，配对流程正常；如果PC端改用局域网IP访问，同样会出现功能失效的问题
• 你在Android移动端通过http://局域网IP:端口的HTTP地址访问页面，属于非可信安全上下文，Android端Chrome会直接禁用Web Bluetooth API。你的代码中isWebBluetoothEnabled()会判定navigator.bluetooth不存在，直接终止执行，因此点击连接按钮没有任何反馈。

• 移动端基础权限：Android 6.0以上系统需要授予Chrome位置权限，否则无法扫描周边BLE设备；Android 12及以上系统还需额外授予Chrome蓝牙扫描、连接权限
• Android端Chrome基础要求：需为Chrome 56及以上版本
• BLE设备广播配置：代码中通过filters: [{ services: ['heart_rate'] }]过滤设备，需确认NRF52840 DK已正常广播标准心率服务，未修改该服务UUID
• 交互触发规则：Web Bluetooth的requestDevice()必须由用户主动交互触发，当前代码绑定表单提交事件，符合规则，无问题
• 代码冗余说明：你定义的deviceName变量未被调用，不影响当前功能，可后续按需清理

• 本地调试临时方案：在Android端Chrome地址栏输入chrome://flags/#unsafely-treat-insecure-origin-as-secure，将你访问的局域网HTTP地址填入输入框，选择“启用”后重启Chrome，即可临时绕过安全上下文限制，仅适用于本地调试，不可用于正式环境
• 内网穿透调试方案：使用内网穿透工具将本地Live Server的端口映射为临时HTTPS公网地址，移动端通过该HTTPS地址访问即可正常使用Web Bluetooth，无需自行配置证书
• 正式部署方案：为页面配置有效HTTPS证书，通过HTTPS地址提供访问

内容的提问来源于stack exchange，提问作者Erick Castillo