Ubuntu系统Apache2服务器启用跨源隔离解决SharedArrayBuffer报错

要使用SharedArrayBuffer，浏览器要求页面必须处于跨源隔离状态，需通过配置Apache2添加两个关键HTTP响应头实现：

• 启用Apache Headers模块
  首先确保headers模块已启用，这是设置自定义HTTP头的前提：

  sudo a2enmod headers
  

• 添加跨源隔离响应头
  有两种配置方式，选其一即可：

  • 方式一：修改站点配置文件（推荐）
    1. 打开你的站点配置文件（路径通常为/etc/apache2/sites-available/[你的站点名].conf）：

       sudo nano /etc/apache2/sites-available/your-site.conf
       

    2. 在<VirtualHost *:80>或<VirtualHost *:443>块内添加以下两行：

       Header set Cross-Origin-Opener-Policy "same-origin"
       Header set Cross-Origin-Embedder-Policy "require-corp"
       

    • Cross-Origin-Opener-Policy: same-origin：确保页面只与同源的文档共享浏览上下文组
    • Cross-Origin-Embedder-Policy: require-corp：要求所有嵌入资源必须符合跨源资源共享规则
  • 方式二：使用.htaccess文件（需开启AllowOverride）
    如果你的站点允许使用.htaccess，在网站根目录创建或编辑.htaccess文件，添加：

    Header set Cross-Origin-Opener-Policy "same-origin"
    Header set Cross-Origin-Embedder-Policy "require-corp"
    

    注意：需确保站点配置中AllowOverride All已开启，否则.htaccess规则不生效。

• 重启Apache使配置生效

  sudo systemctl restart apache2
  

• 验证配置是否生效
  打开浏览器开发者工具（F12），切换到「Network」标签页，刷新页面后查看任意请求的「Response Headers」，确认存在以下两个头：

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

• 注意事项
  如果页面中嵌入了跨域资源（如CDN脚本、第三方图片），需确保这些资源的服务器也返回合适的跨源头（如Cross-Origin-Resource-Policy: cross-origin），否则资源会被浏览器拦截。

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