拒绝连接到x，因为它违反了以下内容安全策略指令connect-src

如何解决拒绝连接到x，因为它违反了以下内容安全策略指令connect-src

我在heroku上部署了MERN应用，并为CSP设置了以下值：

<Meta
      http-equiv="Content-Security-Policy"
      content="connect-src https://api.themoviedb.org 'self'; default-src 'self'; base-uri 'self'; object-src 'none'; script-src 'unsafe-inline' 'self' ; style-src 'unsafe-inline' 'self' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com"
    />

但是，这是我在Chrome控制台中看到的：

拒绝连接到[URL]，因为它违反了以下“内容安全策略”指令：“ default-src'self'”。请注意，未明确设置“ connect-src”，因此将“ default-src”用作备用。

当我在检查页面时可以在index.html中看到它时，为什么它告诉我未设置connect-src？

解决方法

CSP的版本（或级别）具有新支持的功能，这些功能扩展了原始规范。通过html元头为CSP提供服务被认为是遗留的，并且有一些缺点。 尝试通过请求的HTTP标头设置CSP 另外，作为最佳实践，请首先使用default-src您的指令。

不幸的是，Shai Alon 的 answer 标记为“正确答案”是完全错误的，并提供了误导信息。

<meta http-equiv="Content-Security-Policy> 元标记不被视为遗留。
在某些情况下，元标记是将政策传送到页面的唯一方式。
最佳做法是将 default-src 作为您的第一个指令。

废话。 CSP 中的指令顺序没有任何意义。此外，Google 的 strict CSP 根本没有 default-src 指令。

topicstarter 的问题是 node.js 在依赖项中包含 Helmet 中间件。 Helmet v4 发布了一个没有 connect-src 指令的 default CSP HTTP header。
这就是 topicstarter 观察到以下消息的原因：

拒绝连接到 [URL]，因为它违反了以下内容安全策略指令：“default-src 'self'”。请注意，'connect-src' 未明确设置，因此使用 'default-src' 作为后备。

注意它不是来自元标记的 CSP 规则，而是 Helmet 中间件的默认 CSP 规则。

通过元标记添加第二个 CSP 来缓解默认 CSP 确实会失败，因为同时应用了 2 个 CSP - 所有源都应通过这两个 CSP。

所以有两个选项：

禁用 Helmet helmet.contentSecurityPolicy() 并使用元标记交付 CSP。
删除元标记 CSP 并将 connect-src 规则添加到 helmet.contentSecurityPolicy(options)。