Angular 18集成Azure AI Vision Face Analyzer遇跨源隔离错误

错误核心原因 #

报错DOMException: Failed to execute 'postMessage' on 'Worker': SharedArrayBuffer transfer requires self.crossOriginIsolated，本质是**SharedArrayBuffer的使用强制要求页面处于crossOriginIsolated隔离状态**。浏览器会通过检查两个关键HTTP响应头来验证：

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

控制台反复出现的still waiting on run dependencies:和dependency: loading-workers，是因为Worker加载依赖的流程因跨源隔离状态未满足而阻塞。

分步解决方案 #

1. 开发环境（localhost:4200）配置HTTP头 #

方式一：代理配置法

创建proxy.conf.json文件，写入以下内容：

{
  "/": {
    "target": "http://localhost:4200",
    "secure": false,
    "headers": {
      "Cross-Origin-Opener-Policy": "same-origin",
      "Cross-Origin-Embedder-Policy": "require-corp"
    }
  }
}

在angular.json的serve配置中关联该代理文件：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "proxyConfig": "proxy.conf.json"
    // 保留原有其他配置
  }
}

方式二：启动脚本直接添加参数

修改package.json中的start命令，直接指定响应头：

"scripts": {
  "start": "ng serve --headers Cross-Origin-Opener-Policy=same-origin --headers Cross-Origin-Embedder-Policy=require-corp"
}

2. 生产环境服务器配置 #

根据你的生产服务器类型添加响应头：

• Nginx：在站点配置文件中添加

add_header Cross-Origin-Opener-Policy same-origin;
add_header Cross-Origin-Embedder-Policy require-corp;

• Apache：在.htaccess或服务器配置文件中添加

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

3. 验证配置有效性 #

配置完成后，在浏览器控制台执行以下代码，确认是否进入隔离状态：

console.log(self.crossOriginIsolated);

返回true即为配置成功。

额外检查项 #

• 确保所有加载的资源（包括Azure Face API的脚本、WASM文件）都符合require-corp规则，避免跨源资源被浏览器拦截。
• 再次核对angular.json的assets配置，确认Face API相关资源（如AzureAIVisionFace_SIMDBundle.js）已正确打包输出到指定目录。

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