Angular 8 拒绝加载图像，因为它违反了以下内容安全策略指令

Question

我正在用Angular 8.0.0构建一个SPA。我遇到了与此 Github 问题中描述的完全相同的问题。 请注意，还有另一个相关的 SO 问题没有接受的答案。

GitHub 问题中建议的解决方法都对我不起作用。Angular 团队已经关闭了这个问题，并建议发布一个 SO 问题。

背景

应用最初在加载根路由时工作http://localhost:4200/应用重定向到正常工作/records/list。

通过单击[routerLink]链接导航到应用程序中的其他路由时，它可以正常工作。例如，单击[routerLink]生成的此链接即可：

http://localhost:4200/record/Item?RecordID=1

<a
[routerLink]="/record/Item]]"
[queryParams]="{RecordID: id}"
queryParamsHandling="merge"
>
{{ id }}
</a>

但是，当重新加载页面或直接在浏览器中键入链接(不单击路由器链接(时，应用程序不会加载并出现此错误消息。

注意：开发环境中的 ng 服务和 Web 服务器上的 ng build 都会出现问题。该问题仅在使用 ng serve 的初始加载时发生，但它发生在 ng build Web 服务器上的任何页面重新加载或直接导航时。我正在使用一个最小的快速应用程序来运行Web服务器，我可能会尝试使用nginx。

浏览器只显示一个空白屏幕，并显示错误消息：Cannot GET /record/Item/detail

控制台错误：

Refused to load the image 'http://localhost:4200/favicon.ico' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

这是角度路由模块：

app-routing.module.this
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { RecordsTableComponent } from './components/records/table/records-table/records-table.component';
import { RecordLandingComponent } from './components/records/landing/record-landing/record-landing.component';
import { RecordDetailComponent } from './components/records/detail/record-detail/record-detail.component';
import { RecordStatusComponent } from './components/records/status/record-status/record-status.component';
import { RecordProposalComponent } from './components/records/proposal/record-proposal/record-proposal.component';
import { RecordsSearchComponent } from './components/records/search/records-search/records-search.component';
import { RecordChangesGuard } from './guards/records/record-changes/record-changes.guard';
import { RecordParamsGuard } from './guards/records/record-params/record-params.guard';
const routes: Routes = [
{ path: 'records/list', component: RecordsTableComponent },
{ path: 'records/search', component: RecordsSearchComponent },
{
path: 'record/:RecordType',
component: RecordLandingComponent, canActivate: [RecordParamsGuard],
children: [
{ path: '', redirectTo: 'detail', pathMatch: 'full' },
{ path: 'new', component: RecordDetailComponent, canDeactivate: [RecordChangesGuard] },
{ path: 'detail', component: RecordDetailComponent, canDeactivate: [RecordChangesGuard] },
{ path: 'status', component: RecordStatusComponent },
{ path: 'proposal', component: RecordProposalComponent },
]
},
{ path: '**', redirectTo: '/records/list' },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

Answer 1

非常感谢@Xesenix指出问题可能是由自定义服务器引起的。我对我正在使用的快速服务器进行了一些调整，以提供由ng build创建的角度分布。服务器现在似乎正在工作，等待更彻底的测试。这是更新的应用程序.js。

const express = require('express');
const http = require('http');
const app = express();
// Set name of directory where angular distribution files are stored
const dist = 'dist';
// Set port
const port = process.env.PORT || 4201;
// Serve static assets
app.get('*.*', express.static(dist, { maxAge: '1y' }));
// Serve application paths
app.all('*', function (req, res) {
res.status(200).sendFile(`/`, { root: dist });
});
// Create server to listen for connections
const server = http.createServer(app);
server.listen(port, () => console.log("Node Express server for " + app.name + " listening on port " + port));

Answer 2

在索引中.html在头部中添加元标记

''