在本地 Angular 开发服务器中设置标头

Question

我的应用程序是当前在本地主机上运行的仅客户端应用程序。我正在尝试使用需要访问SharedArrayBuffer. 它可以在 Chrome 和 Edge 上运行，但 Firefox 似乎设置了限制，导致出现错误： ReferenceError: SharedArrayBuffer is not defined

根据 MDN 的说法， Firefox 需要设置以下标头：

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

我的应用程序在 localhost:4200 上运行。我正在尝试让ng serve开发服务器设置标头。我尝试使用以下代码来执行此操作：

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

然而这不起作用。有没有办法使用 Angular 服务器设置标头，或者其他解决方法？

Answer 1

您可以将 COEP 和 COOP 标头添加到 angular.json 中的 Angular 开发服务器来解决此问题。

例如。，

"serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "web-ui:build",
            "proxyConfig": "proxy.conf.json",
            "headers": {
              "Cross-Origin-Opener-Policy":"same-origin",
              "Cross-Origin-Embedder-Policy":"require-corp"
            }
           }
          }

这应该将标题“Cross-Origin-Opener-Policy”和“Cross-Origin-Embedder-Policy”设置为适当的值。运行 ngserve 以使这些更改反映在响应中。