Electron环境下Content Security Policy指令失效导致API连接被拒绝问题求助

我帮你梳理下问题的核心原因和可行的解决步骤：

首先看你的报错信息，虽然你在CSP配置里添加了API地址，但还是被拒绝，主要有几个可能的问题点：

核心问题分析 #

1. connect-src包含无效指令
   'unsafe-inline'和'unsafe-eval'是给script-src、style-src这类指令用的，connect-src根本不支持这两个值。把它们放在connect-src里不仅完全没用，还可能干扰浏览器的CSP解析逻辑，导致正常的源匹配失效。

2. 重复冗余的源配置
   你的dev环境CSP里，default-src和connect-src多次重复添加https://myapi.../*，虽然重复本身不会报错，但会增加解析复杂度，也容易出现拼写不一致的疏漏。

3. API地址匹配精度不足
   要确认你实际请求的API完整URL和CSP中配置的地址完全匹配：比如如果API是https://api.myapi.com/v1（子域名），或者https://myapi.com:3000（带端口），那你当前配置的https://myapi.../*就无法匹配这些地址。

具体解决步骤 #

步骤1：修正CSP指令，移除无效值

先把connect-src里的'unsafe-inline'和'unsafe-eval'删掉，同时简化重复的源配置，优化后的代码如下：

export function setupContentSecurityPolicy(customScheme: string): void {
  session.defaultSession.webRequest.onHeadersReceived((details, callback) => {
    callback({
      responseHeaders: {
        ...details.responseHeaders,
        'Content-Security-Policy': [
          electronIsDev
            ? `default-src ${customScheme}://* https://myapi.../* devtools://* data: 'unsafe-inline' 'unsafe-eval'; 
               script-src 'self' https://myapi.../* 'unsafe-inline' 'unsafe-eval'; 
               connect-src 'self' https://myapi.../*;`
            : `default-src ${customScheme}://* 'unsafe-inline' data:`
        ]
      }
    });
  });
}

步骤2：验证API地址的精确匹配

打开Electron开发者工具（Ctrl+Shift+I），切换到Network标签，找到被拒绝的API请求，复制完整的请求URL：

• 如果是子域名，把CSP里的地址改成https://api.myapi.com/*
• 如果带端口，改成https://myapi.com:3000/*
• 确保路径通配符*的位置正确（比如要匹配所有子路径就加在域名后）

步骤3：检查是否存在CSP配置冲突

检查你的项目入口HTML文件，看看有没有<meta http-equiv="Content-Security-Policy">标签——这类标签的CSP规则会和你通过Electron Session设置的Header级CSP冲突，建议直接移除meta标签，统一用Session配置。

步骤4：临时放宽CSP验证问题

如果上面的步骤都没解决，可以临时把connect-src设为*来测试：

connect-src *;

如果这样能成功连接API，说明问题确实出在CSP的源匹配上，再逐步收紧规则找到正确的配置。

最后提醒：修改CSP配置后一定要重启Electron应用，因为Session的CSP规则是在应用启动时加载的，热重载不会生效。

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