将 headers 添加到 angular service worker 响应

Question

Service Worker 的一些响应违反了 CSP，我可能需要添加此 header：

Content-Security-Policy = "connect-src *;"

服务人员的所有回复，如 here and here 所述。

如何使用 angular PWA 向服务工作者响应添加响应 header？

Answer 1

您可以使用 http 拦截器在一个地方拦截任何类型的 http 请求和响应。它也适用于服务人员。

求详细解释here。

https://angular.io/api/common/http/HttpInterceptor

示例：

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(
    ...          
));
}

Answer 2

不需要在服务工作者返回的缓存响应上设置响应headers，解决方案是在服务器上设置特殊的 CSP headers 来响应 SW 脚本。即，当浏览器请求 ngsw-worker.js（Angular SW 脚本的默认名称）时，服务器应附加特殊的 CSP headers（例如 Content-Security-Policy：connect-src *) 到该响应。

将 headers 添加到 angular service worker 响应

Adding headers to angular service worker responses

service-worker

progressive-web-apps

angular

angular-service-worker

angular-pwa