angular - 在本地 Angular 开发服务器中设置 header

Question

我的应用程序是当前在 localhost 上运行的仅限客户端的应用程序。我正在尝试使用需要访问 SharedArrayBuffer 的 Wasm 库。它正在 Chrome 和 Edge 上运行，但似乎 Firefox 设置了限制导致错误:ReferenceError: SharedArrayBuffer 未定义

According to MDN Firefox 需要设置以下 header :

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

我的应用程序在 localhost:4200 上运行。我正在尝试让 ng serve 开发服务器来设置 header 。我试图用下面的代码做到这一点:

// 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 服务器设置 header ，或者其他解决方法？

Answer 1

您可以在 angular.json 中将 COEP 和 COOP header 添加到 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 以使这些更改反射(reflect)在响应中。