Question

启动服务器时，出现以下错误：

拒绝加载图片“ http://localhost:4200/favicon.ico”，因为它违反了以下“内容安全策略”指令： “ default-src'none'”。请注意，未明确设置“ img-src”，因此 'default-src'用作后备。

我没有更改网站图标或其他任何内容，默认情况下都是这样。

Answer 1

原来我的问题是我进行了一次大规模更新（我们知道这是错误的，为什么我们总是这样做？），另一个库fuse.js进行了重大更改并破坏了我的应用程序。 ng build很好，ng serve/ionic serve隐藏了真正的罪魁祸首，所以花了很多时间反复试验才能弄清楚。

帮个忙，不要大规模更新您的package.json

Answer 2

正如其他人已经说过的那样，该错误只是掩盖了真正的问题。

对我来说，事实是我的全局Angular CLI版本低于我的项目之一。
运行npm i -g @angular/cli@<desired version>解决了该问题，可以显示并修复实际错误。

Answer 3

我遇到了同样的问题，尝试了所有可以在网上找到的答案，还有一些关于“资源”的答案。

例如：

angular/angular - Angular 8 upgradation - Error on Content Security Policy directive #30802

Refused to load the font 'data:font/woff…'it violates the following Content Security Policy directive: “default-src 'self'”. Note that 'font-src'

不幸的是，当我启动服务器ng serve时，我忽略了命令行中的错误，该错误与我使用的Global Angular版本（8.3.5）比本地Angular版本（8.0.6）更新有关。在我的项目中。

我使用ng update @angular/cli --force升级了本地Angular版本，升级后发现了错误的真正原因，我在app.component.html文件中犯了一个愚蠢的错误，我犯了类型错误：我关闭了{ {1}}和<td>（而不是</tc>）。

我的结论：下次遇到这种错误时（我是开发人员，所以我相信它会再次发生）-我需要首先检查我最近的更改！

希望这会有所帮助。

Answer 4

在升级到角度8之后，这里的情况相同。

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.json中删除了favicon，只是为了进行测试，所以现在在项目中没有任何提及favicon的问题，但仍然出现此错误。 wtf？

Answer 5

我来这里是为了找到相同问题的答案，但我自己解决了。我的应用程序出现了一个角度编译错误（我没有运行ng build），上面的错误掩盖了这个问题。我错过了在解析器中使用的对象的某些属性。

我正在运行Angular〜7.x

Answer 6

我通过运行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 7

对我来说，节点js后端使用相同的端口4200，更改节点或在其他端口上提供角度服务，它应该可以工作。

Answer 8

您需要正确检查终端日志。我的路由文件中存在导入错误，并进行了纠正以帮助解决此错误。我希望它可以帮助某人。

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（因为尚未加载我的设置）将不允许加载favicon，此外还没有正确解析路由路径（再次未加载）。

使用了一些.thenpromise链以确保快速启动的正确顺序，并且错误消失了-魔术：）

希望这可以帮助其他有类似问题的人。

Answer 12

对我来说，错误发生了，因为我在server.js（快速）中注释了以下行

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

我不知道为什么，但是我没有评论它，一切开始为我工作。

Answer 13

对我来说，错误来自 angular 的模块声明。

在@NgModule 编辑声明和导出部分修复了错误。

Answer 14

似乎可以是任何东西。

一种没有花括号的原型方法。

Answer 15

Please look at this answer

您必须在angular项目的根目录上的index.html中添加元标记

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

15 个答案: