React 17.0.2出现ReferenceError: SharedArrayBuffer未定义报错如何解决

问题根因说明 #

Chrome 92、Safari 15.2及以上版本为了抵御侧信道攻击，默认禁用了SharedArrayBuffer API，只有页面满足跨域隔离条件时才允许调用该API。你遇到的报错是浏览器端安全策略更新导致，和项目未更新依赖无关。

排查步骤 #

• 定位调用来源：打开浏览器控制台的错误调用栈，确认是哪个依赖库/业务代码调用了SharedArrayBuffer，常见的调用方包括WebAssembly音视频处理库、多线程计算库、第三方监控/统计SDK等
• 验证策略影响：使用Chrome 91或更低版本的浏览器访问项目，若报错消失即可确认是浏览器策略更新导致
• 检查当前响应头配置：打开浏览器网络面板，查看页面主文档的响应头，确认是否缺少跨域隔离相关的头配置

解决方案 #

方案1：配置跨域隔离响应头（推荐线上环境使用） #

给站点主资源配置以下两个响应头即可启用SharedArrayBuffer权限：

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

配置完成后需要同步调整站点内所有跨域资源的配置：所有跨域资源需要配置CORS头，或者添加Cross-Origin-Resource-Policy头才能正常加载。

方案2：替换/降级依赖 #

如果排查到是第三方依赖调用了SharedArrayBuffer，可查询对应依赖的官方文档，选择无SharedArrayBuffer依赖的兼容版本，或者替换为功能相同、不依赖该API的替代库。

方案3：临时解除浏览器限制（仅适用于本地开发） #

本地开发阶段可在Chrome地址栏输入chrome://flags/#shared-array-buffer-unrestricted-access，将对应选项设置为Enabled后重启浏览器，即可临时绕过该限制，该方案不可用于线上用户。

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