背景
自从某一天认识了crypto.randomUUID()，我就深深爱上了这个方法，好用，太好用了！ 然后在一次同样是使用这个方法，打包部署之后，打开访问地址，控制台出现了一个报错：
crypto.randomUUID is not a function
我懵了，本地没有问题啊，紧急要发布，赶紧手打了一个生成uuid的方法做兼容。。。
现在有时间复盘，这是一个暴露在window的方法，为什么会报错不是一个方法呢？？？
报错原因分析
浏览器环境问题
crypto.randomUUID()是 Web Crypto API 的一部分，仅支持在 HTTPS 或 localhost 等安全上下文中使用 。如果你打包后通过 HTTP 或 IP 地址访问（如
http://192.168.x.x/），浏览器会禁用该 API，导致报错。Node.js 环境问题
如果错误发生在 Node.js 服务端（如 SSR 场景），则可能是 Node.js 版本过低（低于 14.17.0），不支持该方法。
原来如此，我们部署的地址是一个HTTP的开发测试环境，crypto判定环境不安全，不可用了
解决方案
方案一：使用 HTTPS 访问（推荐）
- 部署到 HTTPS 域名 或使用
localhost访问本地开发环境。 - 这是浏览器端最推荐的解决方式，符合 Web 安全最佳实践。
方案二：使用 polyfill 替代
如果你无法使用 HTTPS，可以手动为浏览器环境添加兼容实现：
js
// main.ts 或入口文件中添加
if (typeof crypto !== 'undefined' && !crypto.randomUUID) {
crypto.randomUUID = function () {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
const r = (Math.random() * 16) | 0;
return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);
});
};
}方案三：改用第三方库（如 uuid）
避免使用原生 crypto.randomUUID，改用 uuid 库，兼容性更好：
bash
npm install uuid
js
import { v4 as uuidv4 } from 'uuid';
const id = uuidv4();适用于 Node.js 和浏览器环境。
检查清单
| 场景 | 检查项 |
|---|---|
| 浏览器 | 是否通过 HTTPS 或 localhost 访问？ |
| Node.js | 版本是否 ≥ 14.17.0？ |
| 打包配置 | 是否有 SSR 或 Node.js 环境使用了浏览器 API？ |
扩展：还要哪些window api需要需要浏览器安全环境
除了 crypto.randomUUID()，还有不少浏览器 API 也只能在"安全上下文" （Secure Context）下使用，即必须通过 HTTPS 或 localhost 访问。以下是常见受限制的 API 分类清单，供你在开发和部署时参考：
需要安全上下文的浏览器 API 清单
| 类别 | API 或接口 | 说明 |
|---|---|---|
| 加密与安全 | crypto.subtle |
Web Crypto API 的核心接口，用于加解密、签名等操作 |
crypto.randomUUID() |
生成 UUID，仅支持安全上下文 | |
CryptoKey |
Web Crypto API 的密钥对象 | |
| 身份认证 | navigator.credentials.create() |
WebAuthn（FIDO2）创建凭证 |
navigator.credentials.get() |
WebAuthn 获取凭证 | |
| 支付相关 | PaymentRequest |
浏览器原生支付接口 |
PaymentMethodChangeEvent |
支付方式变更事件 | |
| 设备访问 | navigator.usb |
WebUSB API |
navigator.bluetooth |
Web Bluetooth API | |
navigator.serial |
Web Serial API | |
navigator.hid |
WebHID API（连接硬件设备） | |
| 剪贴板 | navigator.clipboard |
异步剪贴板 API（读取/写入剪贴板） |
| 地理位置 | navigator.geolocation |
获取用户位置信息 |
| 通知 | Notification.requestPermission() |
桌面通知权限请求 |
| 媒体设备 | navigator.mediaDevices.getUserMedia() |
获取摄像头、麦克风权限 |
| 后台同步 | navigator.serviceWorker.ready.then(sw => sw.sync) |
Background Sync API |
| 存储 | window.caches |
Cache API（用于 PWA 离线缓存） |
| 共享 | navigator.share() |
Web Share API（分享内容到原生应用） |
⚠️ 注意事项
- localhost 被视为安全上下文，开发阶段可放心使用；
- HTTP 内网 IP （如
http://192.168.x.x）不被视为安全上下文，会导致上述 API 报错； - 某些 API（如 WebAuthn）还要求 用户交互触发 才能调用，不能由脚本自动触发。
建议
- 开发阶段 ：使用
localhost或本地 HTTPS 证书（如mkcert）； - 生产环境 ：务必部署到 HTTPS 域名；
- 兼容性检查 ：可通过
window.isSecureContext判断当前是否处于安全上下文。
js
if (!window.isSecureContext) {
console.warn("当前环境不是安全上下文，部分 API 不可用");
}如需进一步排查某个 API 是否受限制，可查阅 MDN Secure Context 文档 或使用 Can I use 查询具体支持情况。