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

Question

我正在使用 Angular 8.0.0 构建 SPA。我正在运行进入 exact same issue as described in this Github issue. Note that there is another related SO question 没有被接受的答案。

None GitHub 问题中建议的解决方法对我有用。 Angular 团队已关闭问题并建议发布 SO 问题。

背景

该应用程序最初在加载根路由时运行 http://localhost:4200/该应用程序重定向到 /records/list 正常运行。

通过单击 [routerLink] link 导航到应用程序中的其他路线时，它可以正常工作。例如，点击这个由 [routerLink] 生成的 link 有效：

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

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

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

注意：开发环境中的 ng serve 和 Web 服务器上的 ng build 都会出现问题。该问题仅发生在 ng serve 的初始加载时，但它发生在 ng 构建 Web 服务器上的任何页面重新加载或直接导航时。我在运行网络服务器上使用了一个最小的 express 应用程序，我可能会尝试使用 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.

这里是Angular路由模块：

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 创建的 angular 发行版的快速服务器进行了一些调整。服务器似乎正在工作，等待更彻底的测试。这是更新后的 app.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

在您的 index.html 头部添加元标记

`<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: http://localhost:4200;>`

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

Angular 8 refused to load load the image because it violates the following Content Security Policy directive

content-security-policy

angular-routing

angular