GitHub Pages自定义域名下SharedArrayBuffer报错修复方案

报错根因 #

从Chrome 92版本开始，SharedArrayBuffer 接口只在开启跨源隔离的页面上下文中开放。要开启跨源隔离，页面及所有子资源的响应必须携带两个安全响应头：

• Cross-Origin-Opener-Policy: same-origin
• Cross-Origin-Embedder-Policy: require-corp
  GitHub Pages默认不会返回这两个响应头，因此依赖SharedArrayBuffer的WASM应用运行时会直接抛出ReferenceError: SharedArrayBuffer is not defined错误。

修复步骤（完全满足不改动访问URL、不迁出GitHub Pages的限制） #

• 在GitHub Pages部署分支对应的站点发布根目录，创建无文件后缀的_headers配置文件。
  注意：如果站点用Jekyll构建，Jekyll默认会忽略下划线开头的文件不发布，需要在根目录的_config.yml里加配置，确保_headers被原样输出到发布目录：

  include: [_headers]
  

• 在_headers文件中写入如下规则，覆盖/score-web路径下的所有资源：

  /score-web/*
    Cross-Origin-Opener-Policy: same-origin
    Cross-Origin-Embedder-Policy: require-corp
    Cross-Origin-Resource-Policy: cross-origin
  

• 检查页面中所有加载的跨域资源（包括脚本、样式、字体、图片、音视频等），给对应的HTML标签加上crossorigin="anonymous"属性，同时确认这些跨域资源本身返回合法的CORS头，否则会被COEP规则拦截导致加载失败。
• 将改动提交推送到GitHub仓库，等GitHub Pages自动部署完成后，按Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac）硬刷新浏览器清除缓存即可。

验证方式 #

打开浏览器开发者工具，切换到网络面板，任选一个站点自身的静态资源查看响应头，确认已经带上配置的两个安全头；此时控制台不再输出SharedArrayBuffer相关报错，WASM应用可正常初始化运行。

内容的提问来源于stack exchange，提问作者Jean-Michaël Celerier