Angular + bootstrap throws error 拒絕加載圖像，因為它違反了以下內容安全策略指令：“default-src 'none'”

Question

我是使用 Angular 開發的新手，但對 NPM 和 Bootstrap 並不陌生。 我正在做一個教程，我從引導網站復制和粘貼文本，通過 npm 安裝 ng-bootstrap 和 bootstrap-scss，單擊瀏覽器上的刷新並返回上述錯誤。 運行 ng-serve 后，終端還說找不到引導程序導入，這很奇怪，因為我的文件結構與引導程序網站相同，而且我的應用程序的所有內容都是直接從文檔中復制粘貼的。 ng-serve 可以單獨顯示文本，但是當我添加引導鏈接時開始拋出錯誤。

我在 github 的 Angular 支持下發現了同樣的問題，官方 angular 支持評論說該問題不存在。 之后，有 30 條來自有此問題的不同人的評論。 我嘗試運行重建 node-sass，刪除並重新安裝 node_modules，並更改 package.json，但均無濟於事。

這是我的 app.module.ts：

import { NgModule } from '@angular/core';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule, NgbModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

HTML 代碼是從https://ng-bootstrap.github.io/#/components/accordion/examples復制而來的

我的 scss 文件中唯一的東西是

@import "../node_modules/bootstrap/scss/bootstrap";

項目中沒有其他文件被更改。

預期：頁面將加載樣式化的文本和小部件。

Output 在瀏覽器中：'無法獲取/'並且在瀏覽器控制台中：拒絕加載圖像' http://localhost:4200/favicon.ico '，因為它違反了以下內容安全策略指令：“default-src 'none'” . 請注意，'img-src' 沒有顯式設置，因此 'default-src' 用作后備。

Answer 1

我修好了它。 如果你想為你的項目使用 scss，從 bootstrap 復制默認的 node_modules 路徑是行不通的。 我通過將 styles.scss 中的文件路徑更改為 @import "../node_modules/bootstrap-scss/bootstrap"; 來顯示我的引導樣式。