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

Question

我的应用程序是一个当前在本地主机上运行的客户端应用程序。我正在尝试使用一个需要访问SharedArrayBuffer的Wasm库。它在Chrome和Edge上都能工作，但是火狐似乎有限制，导致了一个错误：ReferenceError: SharedArrayBuffer is not defined

According to MDN Firefox要求设置以下标头：

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

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

// proxy.conf.js
module.exports = {
  "/": {
    logLevel: "debug",
    target: "http://localhost:4200",
    bypass: (req, res, proxyOptions) => {
      res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
      res.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
    },
  },
};

然而，这并不起作用。有没有一种方法可以用Angular服务器设置头文件，或者另一种解决方法？

Answer 1

您可以将COEP和COOP头添加到angular.json中的Angular Dev-server来解决此问题。

例如，

"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”都设置为适当的值。运行ng serve以使这些更改反映在响应中。