由于服务器上配置了CSP响应标头，Angular应用程序抛出“内联样式…”错误

Question

我正在使用Angular应用程序。正在使用CLI使用Angular 8应用程序。我的应用程序在本地服务器上运行，没有任何故障。

将代码部署到产品服务器（使用ng build --prod构建）时，出现以下错误，如下面的屏幕快照所示：

我知道此错误是由于服务器端实现了CSP响应标头，这阻止了内联css（您可以在服务器上响应标头上的屏幕截图下方看到CSP标头值）：

我知道如果我用'unsafe-inline'更新style-src值的CSP标头，上述错误将得到解决。

其他解决方法（不更新CSP标头）是不使用组件元数据中的styleUrls或styles属性，如以下示例所示（对styleUrls进行注释）：

import { Component } from '@angular/core';
@Component({
 selector: 'app-root',
templateUrl: './app.component.html',
 // styleUrls: ['./app.component.scss'] 
})

我只想知道，我没有使用任何内联CSS那么为什么会出现这些错误？

Answer 1

可能是由于封装，Angular在后台插入了内联样式。

尽管您未使用内联样式，但可能会导致该问题。