拒绝加载 favicon.ico' 它违反了以下内容安全策略指令：“img-src 数据：答案

【问题标题】：Refused to load favicon.ico' it violates the following Content Security Policy directive: "img-src data:拒绝加载 favicon.ico' 它违反了以下内容安全策略指令：“img-src 数据：
【发布时间】：2021-01-19 09:45:18
【问题描述】：

我正在尝试在 Github 页面上部署我的 react.js 应用程序，但我遇到了无法解决的问题。

运行 npm run deploy 后，页面将正确显示在 GitHub 页面链接上，但只有几分钟。最终，它会报告“这里没有 GitHub Pages 站点。

当我检查我的控制台时，它指出：

“拒绝加载图像“https://tandemungwa.github.io/favicon.ico”，因为它违反了以下内容安全策略指令：“img-src 数据：”

我已经广泛研究了这个问题，但找不到解决方案。我进入 index.html 并更改了：

到

.. 也尝试“快捷方式图标”，但没有奏效。

我尝试从应用文件夹中手动删除网站图标，但没有成功。

另外，当我运行“npm start”时，尽管如此，标签上仍会弹出相同的 react favicon，所以看起来该应用程序正在强制自己使用该 favicon，但我不知道如何或为什么。

在这一点上我很沮丧，如果有一个解决方案会很好。

谢谢

另外，我不确定这是否相关，但我的 API 密钥已在应用程序中公开。我知道这不安全，但这并不意味着向公众发布。出于这个原因，我一直将 github 存储库设置为私有。

谁能帮帮我？

【问题讨论】：

标签： reactjs github favicon

【解决方案1】：

我的 Angular 8 项目中出现了同样的错误消息， “拒绝加载图片“https://.github.io/favicon.ico”，因为它违反了以下内容安全策略指令：“img-src 数据：”

问题是图片路径不对，

所以而不是 => <img [src]='assets/img/myImge' alt=''>

做 => <img [src]='./assets/img/myImage'>

我还将图像从 *.jpg 重命名为 *.JPG

之后一切正常。

希望有所帮助:)

【讨论】：

【解决方案2】：

我刚刚遇到了类似的问题。就我而言，问题出在 React 路由器包上。

如果您正在使用该软件包，这可能会有所帮助。

我解决它的方法是将该包的<Router> 组件替换为<HashRouter>

【讨论】：