electron升级到20版本后，禁用第三方cookie、跨域问题解决方法

最新推荐文章于 2025-03-24 08:56:23 发布

程序员wayn

最新推荐文章于 2025-03-24 08:56:23 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏： electron 文章标签： electron javascript 前端

本文链接：https://blog.youkuaiyun.com/Wayn111/article/details/127436868

electron 专栏收录该内容

1 篇文章

订阅专栏

博客讲述了在将公司的Electron项目从13升级到20版本后遇到的QQ登录失效和一键登录跨域问题。升级导致的问题包括：Cookie的SameSite限制使QQ扫码登录失败，以及由于跨域安全策略变化引发的QQ一键登录失效。解决方案分别是：通过 Electron 的 webRequest 对象在响应阶段修改Cookie头添加SameSite=None;Secure，以及禁用BlockInsecurePrivateNetworkRequests特性来解决跨域问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近公司的electron项目从13升级到最新的20版本，导致qq登录失效问题，特此记录

1. qq扫码登录失效

升级后之前的老版本可以扫码登录，但是新版本扫码登录后，页面直接刷新，没有登录成功。经过查看网络请求排查得出是由于新版本Cookie的SameSite限制导致，qq的第三方登录的某些接口在response里设置了cookie属性，却没有加上SameSite=None; Secure，直接导致qq第三方登录最后的登录验证接口读不到的response里设置的cookie属性，导致登录失效。

解决办法：

通过electron的webRequest对象在请求返回阶段加上SameSite=None; Secure，代码如下

    const { app, session } = require('electron')
  app.whenRady().then(() => {
    session.defaultSession.webRequest.onHeadersReceived(
        { urls: ['*://*.qq.com/*'] },
        (details, callback) => {
          if (
              details.responseHeaders &&
              details.responseHeaders['Set-Cookie'] &&
              details.responseHeaders['Set-Cookie'].length &&
              !details.responseHeaders['Set-Cookie'][0].includes('SameSite=none')
          ) {
            for (var i = 0;i< details.responseHeaders['Set-Cookie'].length; i++) {
              details.responseHeaders['Set-Cookie'][i] += '; SameSite=None; Secure';
            }
          }
          callback({ cancel: false, responseHeaders: details.responseHeaders });
        },
    );
  })

2. qq一键登录跨域问题

升级后本机登录qq的pc客户端，使用一键登录也失效了，经过查看控制台报错得出，是跨域安全问题导致。qq的本地一键登录，会通过内网网络请求访问本机的qq pc端，从而实现一键登录，但是升级到20版本后，这个内网网络请求被限制了。

解决办法：

加一行代码,禁用chromium的BlockInsecurePrivateNetworkRequests特性

// 解决qq一键登录跨域问题
app.commandLine.appendSwitch('disable-features','BlockInsecurePrivateNetworkRequests')