Firebase Hosting配置COEP、COOP头不生效 无法启用SharedArrayBuffer问题

问题诊断与修复方案 #

1. 核心配置错误：headers字段层级错误 #

Firebase Hosting要求HTTP响应头配置必须放在hosting对象内部，你当前将headers写在了配置文件根层级，和hosting、emulators平级，因此规则完全不会生效。
修正后的完整firebase.json配置如下：

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "headers": [
      {
        "source": "**",
        "headers": [
          {
            "key": "Cross-Origin-Embedder-Policy",
            "value": "require-corp"
          },
          {
            "key": "Cross-Origin-Opener-Policy",
            "value": "same-origin"
          }
        ]
      }
    ]
  },
  "emulators": {
    "functions": {
      "port": 5001
    },
    "hosting": {
      "port": 5000
    },
    "ui": {
      "enabled": true
    }
  }
}

2. 其他需要修正的点 #

• 你引入ffmpeg的script标签中crossorigin属性值填写错误，有效值只有anonymous和use-credentials，请修改为：

  <script src="https://cdn.jsdelivr.net/npm/@ffmpeg/ffmpeg@0.10.1/dist/ffmpeg.min.js" crossorigin="anonymous"></script>
  

• 配置修改完成后，本地需要重启Firebase模拟器加载新配置，线上部署后需要清除浏览器缓存再测试crossOriginIsolated的值。
• 若后续加载其他跨源资源，需要确保资源响应头包含Cross-Origin-Resource-Policy: cross-origin，否则会被require-corp策略拦截。

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