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>

但是，當重新加載頁面或直接在瀏覽器中輸入鏈接（不點擊路由器鏈接）時，應用程序不會加載並出現此錯誤消息。

注意：問題發生在 dev 環境中的 ng serve 和 web 服務器上的 ng build。 該問題僅發生在使用 ng serve 的初始加載時，但會發生在 ng build web 服務器上的任何頁面重新加載或直接導航上。 我正在使用一個最小的 express 應用程序來運行 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.

這是 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 創建的角度分布提供服務的快速服務器進行了一些調整。 服務器現在似乎正在工作，等待更徹底的測試。 這是更新后的 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;>`