内容安全策略阻止了与 Signalr Hub 的连接

Question

我正在使用 Electron 与 React 和 Typescript 构建应用程序。我有一个用于聊天功能的 SignalR 中心。当我尝试连接到我的 SignalR 服务器时，出现以下错误 Image of error

项目是根据以下指南设置的：https://www.electronforge.io/guides/framework-integration/react-with-typescript

我觉得奇怪的是，当我构建电子应用程序时，它可以毫无问题地连接到 SignalR 集线器。但是我不能每次都想测试它就构建应用程序。我在 index.html 文件中尝试了很多不同的元标记，并且 none 似乎有效。我的理解是我需要设置 connect-src 但每当我将它添加到我的 html 元标记时它仍然说它没有设置。

这可能是一个非常容易解决的问题，但我从未处理过内容安全策略，当反应在浏览器中自行运行时，这对我来说从来都不是问题。

当前元标记如果有帮助：

<meta http-equiv="Content-Security-Policy"
        content="default-src 'self' http: https: data: gap: ws: https://localhost:44396/* 'unsafe-inline' 'unsafe-eval';">

提前致谢

Answer 1

因此，经过反复试验后，我将 post 我是如何解决它的。如果这是一个糟糕的解决方案，请告诉我，但现在我想我会移动一个。但为了解决这个问题，我在电子中添加了 CSP 设置，而不是在 index.html

中添加

我在 index.ts 中添加了以下代码：

session.defaultSession.webRequest.onHeadersReceived(((details, callback) => {
    callback({
      responseHeaders: {
        ...details.responseHeaders,
        'Content-Security-Policy': ['connect-src * ws: http: https: \'self\'']
      }
    });
  }));

内容安全策略阻止了与 Signalr Hub 的连接

Connection to signalr hub blocked by content security policy

content-security-policy

typescript

reactjs

electron

electron-forge