Angular在Electron中设置origin头报Refused to set unsafe header错误如何解决

Origin是W3C规范明确禁止前端代码手动修改的安全请求头，所有运行在浏览器上下文的代码（包括Electron渲染进程）都无法通过XHR、Fetch、Angular HttpClient的header配置主动修改该字段，因此会抛出Refused to set unsafe header "origin"错误。

同时你原有代码里存在配置错误：responseType不属于请求头字段，需要放在httpOptions的根级别，不能放到HttpHeaders内。

Electron环境下只能通过主进程层面修改请求头，以下是两种常用方案：

方案1：主进程拦截请求修改Origin（生产环境推荐） #

Electron主进程拥有网络请求的完全控制权限，通过webRequestAPI拦截目标请求修改头信息是最稳妥的实现，不会带来额外安全风险。

// Electron主进程代码（通常为main.js/main.ts）
const { app, session, BrowserWindow } = require('electron')

app.whenReady().then(() => {
  // 拦截所有 outgoing 请求
  session.defaultSession.webRequest.onBeforeSendHeaders((details, callback) => {
    // 仅匹配你需要修改Origin的目标域名，避免全局修改产生问题
    if (details.url.startsWith('https://any.url.com')) {
      details.requestHeaders.Origin = 'https://custom.url.com'
    }
    callback({ cancel: false, requestHeaders: details.requestHeaders })
  })

  // 原有创建窗口的代码保留
  const mainWindow = new BrowserWindow({
    // 你的窗口配置
  })
})

修改完成后，删除渲染进程Angular代码里HttpHeaders中手动添加的origin字段即可，请求会自动携带主进程设置的Origin头，不会再报错。

修正后的Angular请求配置参考：

const httpOptions = {
  headers: new HttpHeaders({
    // 其他自定义请求头放在此处
  }),
  responseType: 'text' as const,
}

return new Promise((resolve, reject) => {
  this._httpClient
    .get('https://any.url.com', httpOptions)
    .subscribe({
      next: (res) => resolve(res),
      error: (err) => reject(err)
    })
})

方案2：临时关闭Web安全（仅本地调试用） #

如果仅为本地开发调试，可以临时关闭渲染进程的Web安全策略，即可绕过头字段修改限制，该方案存在严重安全风险，生产环境禁止使用。
修改创建BrowserWindow的配置即可：

const mainWindow = new BrowserWindow({
  width: 1200,
  height: 800,
  webPreferences: {
    webSecurity: false, // 关闭Web安全，仅调试用
    // 其他原有配置（contextIsolation、preload等）保持不变
  }
})

内容的提问来源于stack exchange，提问作者Raphaël Balet