Electron应用发起API请求时出现Content Security Policy错误如何解决？

云原生阿岚

2026-9-24

问题核心原因

这个报错是因为当前的CSP规则没有允许跨域请求你的自有API地址，且你没有显式配置connect-src规则，请求直接命中了default-src的限制。同时Electron环境的CSP存在多配置入口，仅修改HTML的meta标签不一定能生效。

分步解决方案

第一步：修正HTML中的CSP配置
显式声明connect-src规则，将你的API域名加入允许列表，修改index.html中meta标签的content字段：
```
<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' 'unsafe-eval' data:; connect-src 'self' https://api.myapp.com;">
```
单独指定connect-src后，所有fetch、WebSocket等网络请求都会优先匹配该规则，不会再回退到default-src。
第二步：检查Electron主进程的CSP配置
如果你修改HTML后仍然报错，说明你的Electron项目在主进程层面配置了覆盖HTML的CSP规则：
1. 找到主进程中创建BrowserWindow的代码，检查webPreferences下是否配置了contentSecurityPolicy字段，如果有，同步更新该字段的规则：
```
const mainWindow = new BrowserWindow({
  width: 800,
  height: 600,
  webPreferences: {
    // 同步更新这里的CSP规则
    contentSecurityPolicy: "default-src 'self' 'unsafe-inline' 'unsafe-eval' data:; connect-src 'self' https://api.myapp.com;",
    preload: path.join(__dirname, 'preload.js')
  }
})
```
1. 检查主进程中是否使用session.webRequest.onHeadersReceived拦截响应头修改CSP，如果有也要同步更新对应规则。
第三步：检查脚手架的CSP配置
如果你使用了electron-vite、Electron Forge、electron-builder等脚手架创建项目，这类工具会在打包/运行时自动注入CSP规则，需要到对应脚手架的配置文件中修改CSP字段：
- electron-vite项目：修改electron.vite.config.js中renderer.csp配置
- Electron Forge项目：修改forge.config.js中对应插件的csp配置