本地没有问题啊！？crypto.randomUUID() 的坑

背景

自从某一天认识了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 查询具体支持情况。