Electron React中使用react-cookie设置Cookie，打包后失效如何解决？

我在Electron React应用中使用react-cookie包设置Cookie，开发模式下一切正常，但打包成桌面应用后就无法写入Cookie了。代码如下：

import { useCookies } from "react-cookie";
const [cookies, setCookie, removeCookie] = useCookies();
setCookie("isWorking", 121, { path: "/" });

开发模式Cookie状态：

生产打包后Cookie状态：

问题根源 #

开发模式下React应用跑在http://localhost协议上，浏览器可以正常处理Cookie；但Electron打包后，应用默认使用file://协议加载本地静态资源，而浏览器的安全策略默认限制了file://协议下的Cookie写入操作，这就是react-cookie失效的核心原因。

解决方案 #

方案1：使用Electron原生Session API管理Cookie（推荐）

Electron主进程提供的session模块可以直接操作Cookie，不受协议限制，是最适配桌面应用的方案。

主进程（main.js）：

const { app, BrowserWindow, session, ipcMain } = require('electron');

// 封装Cookie设置方法
async function setAppCookie(name, value, path = '/') {
  try {
    await session.defaultSession.cookies.set({
      url: 'file://', // 对应打包后的file协议
      name,
      value,
      path,
      httpOnly: false, // 需要在渲染进程读取则设为false
      secure: false // file协议下必须设为false
    });
    console.log('Cookie设置成功');
  } catch (err) {
    console.error('Cookie设置失败:', err);
  }
}

// 通过IPC通信暴露给渲染进程
ipcMain.handle('set-cookie', (_, name, value, path) => {
  return setAppCookie(name, value, path);
});

// 窗口创建逻辑
function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
      // 若开启contextIsolation，需通过preload脚本暴露IPC方法
    }
  });
  mainWindow.loadFile('build/index.html');
}

app.on('ready', createWindow);

渲染进程（React组件）：

import { useEffect } from 'react';
const { ipcRenderer } = window.require('electron');

function MyComponent() {
  useEffect(() => {
    // 调用主进程的Cookie设置方法
    ipcRenderer.invoke('set-cookie', 'isWorking', '121', '/');
  }, []);

  return <div>测试Cookie设置</div>;
}

export default MyComponent;

方案2：配置自定义协议（模拟Web环境）

给Electron应用设置自定义协议（比如myapp://），让应用运行在类HTTP协议环境下，react-cookie即可正常工作。

主进程（main.js）：

const { app, BrowserWindow } = require('electron');

// 注册自定义协议
app.setAsDefaultProtocolClient('myapp');

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  // 加载打包后的React应用
  mainWindow.loadURL('myapp://./build/index.html');
}

app.on('ready', createWindow);

React应用配置：
在根组件中配置CookiesProvider，指定自定义协议的Cookie参数：

import { CookiesProvider } from 'react-cookie';
import AppContent from './AppContent';

function App() {
  return (
    <CookiesProvider defaultSetOptions={{ path: '/', domain: 'myapp' }}>
      <AppContent />
    </CookiesProvider>
  );
}

export default App;

方案3：修改Electron Cookie安全策略（不推荐）

通过修改权限策略强制允许file://协议下的Cookie写入，但这种方式会降低应用安全性，仅适合临时测试：

app.on('ready', () => {
  const ses = session.defaultSession;
  ses.webContents.on('did-finish-load', () => {
    ses.cookies.set({
      url: 'file://',
      name: 'isWorking',
      value: '121',
      path: '/'
    });
  });

  // 允许所有权限请求（不安全）
  ses.setPermissionRequestHandler((webContents, permission, callback) => {
    callback(true);
  });
});

总结 #

优先选择方案1（Electron原生Session API），它更贴合桌面应用特性且安全性更高；如果想贴近Web开发习惯，可以选择方案2配置自定义协议；方案3仅作临时测试，不建议在生产环境使用。

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