跨源策略配置难题：同时兼容WASM与弹窗功能

方案一：给弹窗页面单独配置COOP头 #

• 主页面保留以下响应头，满足SharedArrayBuffer的要求：

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

• 把弹窗内容放到独立页面中，给这个弹窗页面单独配置：

  Cross-Origin-Opener-Policy: same-origin-allow-popups
  

  确保该弹窗页面无需使用SharedArrayBuffer
• 主页面通过window.open打开这个独立弹窗，两边功能即可正常运行

方案二：调整S3图片的跨域配置，适配require-corp #

• 给S3存储桶配置CORS规则，允许你的网站域名访问，将返回的Access-Control-Allow-Origin设为你的网站域名（按需设置，不推荐用通配符）
• 在页面引用S3图片时，给<img>标签添加crossorigin="anonymous"属性，这样图片就能在require-corp环境下正常加载，无需修改主页面的COOP头

方案三：用iframe隔离WASM功能 #

• 在主页面嵌入一个iframe，给该iframe对应的页面配置支持SharedArrayBuffer的响应头：

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

  所有WASM相关代码都放在这个iframe里运行
• 主页面保持Cross-Origin-Opener-Policy: same-origin-allow-popups，确保弹窗和S3图片正常工作
• 主页面与iframe通过postMessage传递数据，实现功能交互

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