图片违反了以下内容安全策略指令 - Create React App
Image violates the following Content Security Policy directive - Create React App
当 运行 我的 React 应用程序时，我在 chrome 中收到以下内容安全策略错误。我尝试用谷歌搜索这个很长一段时间，但我找不到足够的信息来说明如何在使用 create-react-app 时解决这个问题。非常感谢任何帮助。
对您的问题进行了一番搜索后，我找到了 here in MDN。我将很快定义问题所在，但要了解更多信息，我强烈建议您阅读提供的 link.
那么这里到底发生了什么？
这是因为该网站配置为使用内容安全策略 (CSP) 来防止有人从第三方恶意加载代码。 Content-Security-Policy 元标记允许您定义可以从何处加载资源，从而防止浏览器从任何其他位置加载数据，从而降低 XSS 攻击的风险。这使得攻击者更难将恶意代码注入您的网站。
那怎么解决呢？
根据我提供的 MDN link，我们应该通过将以下元标记添加到我们的 index.html.
来解决这个问题
<meta http-equiv="Content-Security-Policy" content="default-src 'self' *.trusted.com">
注意： *.trusted.com 应该是受信任的站点或它们的列表。
那在你自己的localhost上应该怎么办？
我遇到过几个像你这样的问题，然后发现当这个错误出现在你的控制台上时，这不一定表明你的项目有这个确切的问题，你的主要代码中的其他问题可能会导致这样的错误。我刚发现一些类似的问题，将在下面分享：
- Same issue on angular
- Same issue on ionic
Same issue on react
等等
那么你必须做什么？
首先，请检查您项目中所有现有的代码和路径，确保它们都没有错误。当您消除所有错误后，这应该会像往常一样消失，但如果问题仍然存在，请确保在浏览器中禁用所有扩展程序（您可以安全地在隐身模式下测试它而无需禁用任何东西）然后 运行 项目并查看错误是否消失。
所以有两个步骤可以摆脱它：
- 摆脱所有项目和路径错误
- 确保禁用所有 扩展程序
当 运行 我的 React 应用程序时，我在 chrome 中收到以下内容安全策略错误。我尝试用谷歌搜索这个很长一段时间，但我找不到足够的信息来说明如何在使用 create-react-app 时解决这个问题。非常感谢任何帮助。
对您的问题进行了一番搜索后，我找到了 here in MDN。我将很快定义问题所在，但要了解更多信息，我强烈建议您阅读提供的 link.
那么这里到底发生了什么？
这是因为该网站配置为使用内容安全策略 (CSP) 来防止有人从第三方恶意加载代码。 Content-Security-Policy 元标记允许您定义可以从何处加载资源，从而防止浏览器从任何其他位置加载数据，从而降低 XSS 攻击的风险。这使得攻击者更难将恶意代码注入您的网站。
那怎么解决呢？
根据我提供的 MDN link，我们应该通过将以下元标记添加到我们的 index.html.
<meta http-equiv="Content-Security-Policy" content="default-src 'self' *.trusted.com">
注意： *.trusted.com 应该是受信任的站点或它们的列表。
那在你自己的localhost上应该怎么办？
我遇到过几个像你这样的问题，然后发现当这个错误出现在你的控制台上时，这不一定表明你的项目有这个确切的问题，你的主要代码中的其他问题可能会导致这样的错误。我刚发现一些类似的问题，将在下面分享：
- Same issue on angular
- Same issue on ionic
Same issue on react
等等
那么你必须做什么？
首先，请检查您项目中所有现有的代码和路径，确保它们都没有错误。当您消除所有错误后，这应该会像往常一样消失，但如果问题仍然存在，请确保在浏览器中禁用所有扩展程序（您可以安全地在隐身模式下测试它而无需禁用任何东西）然后 运行 项目并查看错误是否消失。
所以有两个步骤可以摆脱它：
- 摆脱所有项目和路径错误
- 确保禁用所有 扩展程序