Electron+React+TS开发环境连接SignalR Hub被Content Security Policy拦截

核心原因 #

Electron Forge 开发模式下会默认注入自带的 Content Security Policy 响应头，优先级高于 HTML 中写的 meta 标签，因此手动在index.html中添加的CSP配置不会生效，这就是打包后正常、开发环境报错的根本原因。

解决步骤 #

• 方案1：在主进程创建BrowserWindow时配置CSP（优先级最高，全环境生效）
  直接在窗口配置的webPreferences中添加CSP规则即可，注意CSP域名规则不需要加末尾的通配符*，示例代码如下：

  const mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      // 原有配置如preload、nodeIntegration等保持不变
      contentSecurityPolicy: "default-src 'self' http: https: data: gap: ws: wss: https://localhost:44396 'unsafe-inline' 'unsafe-eval'; connect-src 'self' ws: wss: https://localhost:44396;"
    }
  })
  

• 方案2：修改Electron Forge的开发配置，禁用自动注入CSP
  如果你使用的是Webpack模板，找到项目根目录下的webpack.dev.config.js，在devServer配置中添加清空默认CSP头的配置：

  module.exports = {
    // 其他原有配置保持不变
    devServer: {
      // 其他devServer配置保持不变
      headers: {
        'Content-Security-Policy': ''
      }
    }
  }
  

  如果你是在package.json中管理Forge配置，直接修改插件参数即可：

  "config": {
    "forge": {
      "plugins": [
        ["@electron-forge/plugin-webpack", {
          "devContentSecurityPolicy": "default-src 'self' http: https: data: gap: ws: wss: https://localhost:44396 'unsafe-inline' 'unsafe-eval'; connect-src 'self' ws: wss: https://localhost:44396;"
        }]
      ]
    }
  }
  

• 临时调试方案：开发阶段可临时关闭web安全校验（仅开发环境使用，打包上线必须移除该配置）

  const mainWindow = new BrowserWindow({
    webPreferences: {
      webSecurity: false,
      // 其他原有配置保持不变
    }
  })
  

补充说明 #

React单独在浏览器运行时没有该报错，是因为浏览器端的React开发服务器默认不会强制开启CSP校验，而Electron环境默认会做CSP校验，因此才会出现差异。

内容的提问来源于stack exchange，提问作者Typelias