拒絕加載圖像，因為它違反了以下內容安全策略指令（圖標）

Question

當我啟動服務器時，出現以下錯誤：

拒絕加載圖像“ http://localhost:4200/favicon.ico ”，因為它違反了以下內容安全策略指令：“default-src 'none'”。 請注意，'img-src' 未明確設置，因此使用 'default-src' 作為后備。

我沒有改變網站圖標或任何東西，都是默認的。

Answer 1

我來這里是為了尋找同一問題的答案，但我自己解決了。 我的應用程序中有一個角度編譯錯誤（我沒有運行 ng build），上面的錯誤掩蓋了這個問題。 我錯過了我在解析器中使用的對象的一些屬性。

我正在運行 Angular ~7.x

Answer 2

我遇到了同樣的問題，嘗試了我可以在網上找到的所有答案以及一些關於“資源”的答案。

例如：

angular/angular - Angular 8 升級 - 內容安全策略指令錯誤 #30802

拒絕加載字體 'data:font/woff...' 它違反了以下內容安全策略指令：“default-src 'self'”。 請注意，'font-src'

不幸的是，當我啟動我的服務器ng serve時，我忽略了命令行中的一個錯誤，該錯誤是關於我使用的 Global Angular 版本 (8.3.5) 比我項目中的本地 Angular 版本 (8.0.6) 新。

我使用ng update @angular/cli --force升級了我的本地 Angular 版本，並且在升級后發現了錯誤的真正原因，我在app.component.html文件中犯了一個愚蠢的錯誤我犯了一個類型錯誤：我關閉了一個<td>與</tc> （而不是</td> ）。

我的結論：下次我遇到這種錯誤時（我是開發人員，所以我相信它會再次發生）-我需要先檢查我最近的更改！

希望這可以幫助。

Answer 3

我的問題是我做了一次大規模更新（我們知道這是錯誤的，為什么我們總是這樣做？）和另一個庫， fuse.js有重大的重大變化並破壞了我的應用程序。 ng build良好， ng serve/ionic serve隱藏了真正的罪魁禍首，因此需要反復試驗才能弄清楚。

幫自己一個忙，不要大量更新你的package.json

Answer 4

正如其他人所說，錯誤只是掩蓋了真正的問題。

對我來說，事實是我的全局 Angular CLI 版本低於我的項目之一。
運行npm i -g @angular/cli@<desired version>解決了問題，真正的錯誤可以顯示和修復。

Answer 5

我通過運行ng update @angular/cli --force

下面是我的依賴項

"dependencies": {
 "@angular/animations": "~8.2.0-next.2",
 "@angular/cdk": "~8.1.1",
 "@angular/common": "~8.2.0-next.2",
 "@angular/compiler": "~8.2.0-next.2",
 "@angular/core": "~8.2.0-next.2",
 "@angular/flex-layout": "^8.0.0-beta.26",
 "@angular/forms": "~8.2.0-next.2",
 "@angular/material": "^8.1.1",
 "@angular/platform-browser": "~8.2.0-next.2",
 "@angular/platform-browser-dynamic": "~8.2.0-next.2",
 "@angular/router": "~8.2.0-next.2",
 "angularfire2": "^5.2.1",
 "core-js": "^2.5.4",
 "firebase": "^6.2.3",
 "hammerjs": "^2.0.8",
 "rxjs": "~6.5.2",
 "tslib": "^1.9.0",
 "zone.js": "~0.9.1"
},
 "devDependencies": {
 "@angular-devkit/build-angular": "~0.801.2",
 "@angular/cli": "^8.1.2",
 "@angular/compiler-cli": "~8.2.0-next.2",
 "@angular/language-service": "~8.2.0-next.2",
 "@types/jasmine": "~2.8.8",
 "@types/jasminewd2": "~2.0.3",
 "@types/node": "~8.9.4",
 "codelyzer": "^5.0.1",
 "jasmine-core": "~2.99.1",
 "jasmine-spec-reporter": "~4.2.1",
 "karma": "~4.0.0",
 "karma-chrome-launcher": "~2.2.0",
 "karma-coverage-istanbul-reporter": "~2.0.1",
 "karma-jasmine": "~1.1.2",
 "karma-jasmine-html-reporter": "^0.2.2",
 "protractor": "~5.4.0",
 "ts-node": "~7.0.0",
 "tslint": "~5.11.0",
 "typescript": "3.4.5"
}

Answer 6

對我來說，節點 js 后端使用相同的端口 4200，更改節點或在不同端口上提供角度服務，它應該可以工作。

Answer 7

您需要在終端日志中正確檢查。我在我的路由文件中導入錯誤並進行更正以幫助我解決此錯誤。 我希望它可以幫助某人。

Answer 8

我有同樣的問題，但使用以下解決方案解決了。

  <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico" />

我用的是.ico文件而不是.png文件，這對我有用。 嘗試一次。

Answer 9

我在使用 Angular 9 的 Linux Mint 下遇到了同樣的問題。我們的項目在 MAC OS X 和 Windows 上運行良好。 組裝新桌面並安裝 Linux 后，我遇到了同樣的錯誤。 升級節點版本、角度版本、刪除 node_modules 等所有選項都沒有解決問題。 在我的機器上，問題是：

！！！ 項目路徑包含特殊字符，例如： %20 。

那是因為我們使用 Microsoft TFS 並且存儲庫名稱包含空格，這些空格會被轉換為 %20 和其他字符...所以如果您像我一樣感到沮喪，請查看您的項目路徑，也許更改路徑可以解決問題

Answer 10

就我而言，我在快速服務器中運行 Angular 應用程序，而網站文件所在的文件夾拼寫錯誤。 顯然，這個問題沒有具體的答案。

Answer 11

我發現了另一個可能會出現此類錯誤的原因：

就我而言，它與網站圖標加載或 CSP 標頭無關。 而是快速服務器啟動的順序。 有一些異步調用導致 express.listen 命令。 這意味着 express 在完成設置之前就開始監聽了。 這樣做的凈效果是，CSP 標頭 DEFAULT（因為我的設置尚未加載）不允許網站圖標加載，此外還沒有正確解析路由路徑（同樣，尚未加載）。

使用了一些 .then 承諾鏈接來確保快速啟動的正確順序，並且錯誤消失了 - 魔術:)

希望這可以幫助其他有類似問題的人。

Answer 12

對我來說，錯誤來了，因為我在 server.js (Express) 中注釋了以下行

app.use(express.static('../dist/alpha/'));

我不知道為什么，但我取消了它的注釋，一切都開始為我工作。

Answer 13

對我來說，錯誤來自 angular 的模塊聲明。

在@NgModule 編輯聲明和導出部分修復了錯誤。

Answer 14

它似乎可以是任何東西。

一種沒有花括號的原型方法。

Answer 15

請看這個答案

您必須在angular項目的根目錄上的index.html中添加元標記