图片违反了以下内容安全策略指令 - 创建 React App答案

【问题标题】：Image violates the following Content Security Policy directive - Create React App图片违反了以下内容安全策略指令 - 创建 React App
【发布时间】：2020-04-19 02:32:18
【问题描述】：

运行我的 React 应用程序时，我在 chrome 中收到以下内容安全策略错误。我尝试在谷歌上搜索了很长时间，但在使用 create-react-app 时找不到有关如何解决此问题的足够信息。非常感谢任何帮助。

【问题讨论】：

我的代码到底是哪一部分？我使用 create-react-app 生成了应用程序，并且没有触及公用文件夹（index.html 等）中的任何内容 - 我只修改了 src 文件夹。

标签： reactjs google-chrome create-react-app favicon content-security-policy

【解决方案1】：

在对您的问题进行了一些搜索后，我最终找到了here in MDN。我将很快定义问题所在，但要了解更多信息，我强烈建议您阅读提供的链接。

那么这里到底发生了什么？

这是因为网站配置为使用内容安全策略 (CSP) 来防止有人恶意加载第三方代码。 Content-Security-Policy 元标记允许您定义可以从何处加载资源，防止浏览器从任何其他位置加载数据，从而降低 XSS 攻击的风险。这使得攻击者更难将恶意代码注入您的网站。

那该如何解决呢？

根据我提供的 MDN 链接，我们应该通过将以下元标记添加到我们的 index.html 来解决这个问题。

<meta http-equiv="Content-Security-Policy" content="default-src 'self' *.trusted.com">

注意：*.trusted.com 应该是受信任的站点或它们的列表。

那么在你自己的 localhost 上应该发生什么？

我遇到了几个像你这样的问题，然后发现这个错误何时出现在你的控制台上，这不一定表明你的项目有这个确切的问题，你的主代码中的其他问题可能会导致这样的错误。我刚刚发现了一些类似的问题，将在下面分享：

那么你必须做什么？

首先，请检查项目中所有现有的代码和路径，并确保它们都没有错误。当您摆脱所有错误时，这应该像往常一样消失，但是如果问题仍然存在，请确保禁用浏览器中的所有扩展程序（您可以在不禁用任何东西的情况下安全地在隐身模式下测试它）然后运行项目看看错误是否消失。

所以有两个步骤可以摆脱它：

摆脱所有项目和路径错误
确保您的所有扩展程序都已禁用

【讨论】：

嗨，在 index.html 中设置 CSP 并没有解决我的错误 - 在这个答案的一个 cmets 中不鼓励这样做：stackoverflow.com/a/51393567/11223254。但是，我的错误确实与路径错误有关，因为在修复了我使用 react-router 的方式后，我能够加载页面。感谢您的回答！