Electron中Content Security Policy阻止fetch请求如何解决？

问题根因 #

你的Electron应用当前的内容安全策略(CSP)没有配置connect-src规则，默认兜底的default-src仅允许同源、内联资源和data协议资源，因此跨源API请求被拦截。你之前的配置不生效有两个核心原因：

• unsafe-eval规则仅控制脚本执行权限，和网络请求权限无关
• 高版本Electron中，响应头注入的CSP优先级高于HTML内的meta标签，且仅关闭webSecurity不会覆盖已声明的CSP规则

解决方案 #

方案1：调整CSP规则（最推荐，符合安全规范） #

情况A：使用meta标签配置CSP

在你的HTML入口文件<head>标签内添加/修改CSP配置，显式声明允许的API请求地址：

<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' data:; connect-src 'self' https://你的API域名.com <其他需要允许的地址>">

开发环境临时调试可以直接设置connect-src *允许所有地址请求，生产环境请替换为实际用到的域名。

情况B：CSP由响应头注入

如果你使用的Electron脚手架（如electron-vite、vue-cli-plugin-electron-builder）或者主进程webRequest模块主动注入了CSP响应头，需要在对应配置位置修改CSP规则，响应头CSP优先级高于meta标签，仅改meta不生效：

• electron-vite 项目：修改electron.vite.config.js中renderer.csp配置项
• 主进程手动注入的场景：修改onHeadersReceived回调中返回的CSP头内容

方案2：主进程代理请求（完全规避CSP限制，安全性最高） #

渲染进程的CSP限制仅针对浏览器环境，Electron主进程没有这类限制，你可以把请求逻辑移到主进程执行：

• 渲染进程通过IPC发送请求参数到主进程
• 主进程使用Node.js原生http/https模块或者axios发起请求
• 主进程拿到请求结果后通过IPC返回给渲染进程
  这种方案不需要修改任何CSP规则，也不会引入额外安全风险，是生产环境的首选方案。

方案3：开发环境临时禁用CSP（仅建议本地调试用） #

如果是本地开发调试需要快速绕过限制，可以在创建BrowserWindow时添加以下配置：

const win = new BrowserWindow({
  webPreferences: {
    webSecurity: false,
  }
})
// 同时在主进程入口顶部添加全局开关
app.commandLine.appendSwitch('disable-features', 'ContentSecurityPolicy')

生产环境不要使用该配置，会带来严重安全隐患。

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