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

Question

我的应用程序是当前在localhost上运行的仅客户端应用程序。我正在尝试使用一个需要访问SharedArrayBuffer的Wasm库。它正在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开发服务器设置标题。我尝试用以下代码来做这件事：

// 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

您可以在Angular.json中将COEP和COOP头添加到Angular Dev服务器以解决此问题。

例如。，

"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"
}
}
}

这应该得到两个标题"；跨来源开放者政策"；以及"；跨来源嵌入器策略"；至适当的值。运行ng serve以使这些更改反映在响应中。

Answer 2

很长时间以来一直在寻找解决方案-感谢@Sasikumar的提示！

只是想补充一下，默认的新/我的角度项目中的部分看起来没有什么不同：

"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"browserTarget": "webapp:build:production"
},
"development": {
"browserTarget": "webapp:build:development",
"headers": {
"X-Max-Test":"my-test-header",
"Content-Security-Policy": "default-src 'self'; frame-ancestors 'self'; script-src 'self' 'unsafe-inline'; font-src 'self' https://fonts.gstatic.com/; style-src 'self' https://fonts.googleapis.com/ 'unsafe-inline'; img-src 'self' data:;"
}
}
},
"defaultConfiguration": "development"