Using axios to solve cors problem in electron


After integrating axios in electron, it is found that axios cannot read the set Cookie response header, and axios cannot write the Cookie response header.


Chromium does not support cross site access to HttpOnly cookies. electron has two processes: one is the main process and the other is the rendering process. Its rendering process is chromium's process and the main process is NodeJS's process. electron uses chromium's process to render the interface, so axios cannot modify and read cookies in chromium because HttpOnly is set on the server.


The IPC message mechanism of electron is used to trigger the network request event in the rendering process (Chromium process), and the event is sent to the main process of electron (NodeJS process). The axios network request is made in the main process to call the remote server API, because the main process is a NodeJS environment, not a Chromium browser environment, and is not limited by CORS. Finally, after processing the remote server API data, the IPC message mechanism of electron will be used again to send the data back to the rendering process for UI interface rendering.


It is assumed that the electron ic quick tutorial has been completed, namely:
In addition, the axios library has been installed, that is:

npm install axios

The following modifications are made to the basic project code of Electro:


const {
} = require("electron");
const axios = require("axios").default;
// include the Node.js 'path' module at the top of your file
const path = require("path");

const baseURL = "";
var myCookie;
const axiosClient = axios.create({
  headers: {
    "Session-Access-Origin": "xxx",
    "Content-Type": "application/json",
  (config) => {
    if (myCookie !== undefined) {
    // Add Cookie request header
      config.headers["Cookie"] = myCookie;
    return config;
  (error) => Promise.reject(

function createWindow() {
  const win = new BrowserWindow({
    width: 1920,
    height: 1080,
    webPreferences: {
      preload: path.join(__dirname, "preload.js"),
      nodeIntegration: true,
      contextIsolation: false,


app.whenReady().then(() => {

  app.on("activate", function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();

app.on("window-all-closed", function () {
  if (process.platform !== "darwin") app.quit();

//ipcMain.on will accept the "btnclick" event sent from the rendering process
ipcMain.on("btnclick", function (event, arg) {
  var data = JSON.stringify({
    account: "xxx",
    password: "xxxx",

    .post("/api/user/userLogin", data)
    .then((res) => {
    // After successful login, get the set cookie
      myCookie = res.headers["set-cookie"][0].split(";")[0];
		// Send login task finished event
		// Send the data to the rendering process to refresh the UI interface
      event.sender.send("login-task-finished", myCookie);
    .catch((err) => console.log(err));

//ipcMain.on will accept the "getTime" event sent from the rendering process
ipcMain.on("getTime", function (event, arg) {
// Test again whether the login is successful. This interface can be called normally only after the login is successful
    .then((res) => {
      const data =;
      // Send gettime task finished event
		// Send the data to the rendering process to refresh the UI interface
    .catch((err) => console.log(err));


// IPC message module introducing electron
const ipcRenderer = require("electron").ipcRenderer;

const btnclick = document.getElementById("loadnewwindow");
btnclick.addEventListener("click", function () {
  var arg = "secondparam";

  //Send btnclick event to main thread
  ipcRenderer.send("btnclick", arg); // ipcRender.send will pass the information to main process

const getTimeclick = document.getElementById("get_time");
getTimeclick.addEventListener("click", function () {
  var arg = "gettime";

  //Send getTime event to main thread
  ipcRenderer.send("getTime", arg); // ipcRender.send will pass the information to main process
// Receive the login task finished event of the main thread
ipcRenderer.on("login-task-finished", (event, param) => {
  var div = document.getElementById("session");
  div.innerHTML = param;
// Receive the gettime task finished event of the main thread
ipcRenderer.on("getTime-task-finished", (event, param) => {
  var div = document.getElementById("time");
  div.innerHTML = param;


<!DOCTYPE html>
    <meta charset="UTF-8" />
    <!-- -->
      content="default-src 'self'; script-src 'self'"
      content="default-src 'self'; script-src 'self'"
    <title>Hello World!</title>
    <h1>Hello World!</h1>
    We are using Node.js <span id="node-version"></span>, Chromium
    <span id="chrome-version"></span>, and Electron
    <span id="electron-version"></span>.
    <button id="loadnewwindow">login</button>
    <br />
    <label id="session"></label>
    <br />
    <button id="get_time">get time</button>
    <br />
    <label id="time"></label>
    <br />
<!-- Rendering process script -->
    <script src="./renderer.js"></script>


window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text

  for (const dependency of ['chrome', 'node', 'electron']) {
    replaceText(`${dependency}-version`, process.versions[dependency])


The main electron process is a NodeJS process, not a Chromium process, and is not restricted by CORS; The rendering process is a Chromium process, which is restricted by CORS. By running axios in the main process, you can break through CORS and read and modify cookies instead. The main process here is equivalent to the background main process of electron. Advanced rendering is used to render UI. To some extent, it is separated from the front end. The main process concept of electron is different from that of Android main thread. The main thread of Android cannot do time-consuming tasks. The main process of electron can do time-consuming operations without affecting the rendering process.
In addition, Daneng proposes to use the axios cookie jar support library to enhance axios. I haven't tried it here, so that's all.
Finally, the source code reference is given.

reference resources:

Posted on Sun, 24 Oct 2021 04:15:57 -0400 by elim