How do you handle CORS in an electron app?

Question

I'm building an electron app and need to call APIs where the API provider has not enabled CORS. The typically proposed solution is to use a reverse proxy which is trivial to do when running locally by using node and cors-anywhere like this:

let port = (process.argv.length > 2) ? parseInt (process.argv[2]) : 8080; 
require ('cors-anywhere').createServer ().listen (port, 'localhost');

The app can then be configured to proxy all requests through the reverse proxy on localhost:8080.

So, my questions are:

1. Is it possible to use node and cors-anywhere in an electron app to create a reverse proxy? I don't want to force the app to make calls to a remote server.

2. Is there a better or standard way of doing this in an Electron app? I'm assuming I'm not the first to run into CORS issues. :)

Answer 1

Just overide header before send request using webRequest.onBeforeSendHeaders

const filter = {
  urls: ['*://*.google.com/*']
};
const session = electron.remote.session
session.defaultSession.webRequest.onBeforeSendHeaders(filter, (details, callback) => {
    details.requestHeaders['Origin'] = null;
    details.headers['Origin'] = null;
    callback({ requestHeaders: details.requestHeaders })
});

put these codes in renderer process

Answer 2

In my application, it wasn't sufficient to remove the Origin header (by setting it to null) in the request. The server I was passing the request to always provided the Access-Control-Allow-Origin header in the response, regardless of it the Origin header is present in the request. So the embedded instance of Chrome did not like that the ACAO header did not match its understanding of the origin.

Instead, I had to change the Origin header on the request and then restore it on the Access-Control-Allow-Origin header on the response.

app.on('ready', () => {
  // Modify the origin for all requests to the following urls.
  const filter = {
    urls: ['http://example.com/*']
  };

  session.defaultSession.webRequest.onBeforeSendHeaders(
    filter,
    (details, callback) => {
      console.log(details);
      details.requestHeaders['Origin'] = 'http://example.com';
      callback({ requestHeaders: details.requestHeaders });
    }
  );

  session.defaultSession.webRequest.onHeadersReceived(
    filter,
    (details, callback) => {
      console.log(details);
      details.responseHeaders['Access-Control-Allow-Origin'] = [
        'capacitor-electron://-'
      ];
      callback({ responseHeaders: details.responseHeaders });
    }
  );

  myCapacitorApp.init();
});

Answer 3

Try this if you are running web apps in localhost

const filter = {
  urls: ['http://example.com/*'] // Remote API URS for which you are getting CORS error
}

browserWindow.webContents.session.webRequest.onBeforeSendHeaders(
  filter,
  (details, callback) => {
    details.requestHeaders.Origin = `http://example.com/*`
    callback({ requestHeaders: details.requestHeaders })
  }
)

browserWindow.webContents.session.webRequest.onHeadersReceived(
  filter,
  (details, callback) => {
    details.responseHeaders['access-control-allow-origin'] = [
      'capacitor-electron://-',
      'http://localhost:3000' // URL your local electron app hosted
    ]
    callback({ responseHeaders: details.responseHeaders })
  }
)

Answer 4

Just had this issue today API calls with axios inside a React app bundled in Electron is returning 400

From what I can see Electron calls act as normal calls to the API urls meaning they are not affected by CORS.

Now when you wrap your calls with a CORS proxy and make a regular call to the proxy, it should error with a 400 error because it's not a CORS call. This thread explains why cors-anywhere responds like that => https://github.com/Rob--W/cors-anywhere/issues/39

I actually removed my CORS proxies from the app before the Electron build. I still need the CORS proxy for development since I'm testing in the browser.

Hope this helps.

Answer 5

You can have the main process, the NodeJS server running Electron, send the request. This avoids CORS because this is a server-to-server request. You can send an event from the frontend (the render process) to the main process using IPC. In the main process you can listen to this event, send the HTTP request, and return a promise to the frontend.

In main.js (the script where the Electron window is created):

import { app, protocol, BrowserWindow, ipcMain } from ‘electron’
import axios from 'axios'

ipcMain.handle('auth', async (event, ...args) => {
  console.log('main: auth', event, args)  const result = await axios.post(
    'https://api.com/auth',
    {
      username: args[0].username,
      password: args[0].password,
      auth_type: args[1],
    },
  )  console.log('main: auth result', result)
  console.log('main: auth result.data', result.data)  return result.data
})

In your frontend JS:

import { ipcRenderer } from 'electron'

sendAuthRequestUsingIpc() {
  return ipcRenderer.invoke('auth',
    {
      username: AuthService.username,
      password: AuthService.password,
    },
    'password',
  ).then((data) => {
    AuthService.AUTH_TOKEN = data['access_token']
    return true
  }).catch((resp) => console.warn(resp))
}

I wrote an article that goes into more depth here.

Answer 6

While I have struggled a while with the existing answers I will provide here the solution that finally worked for me, assuming that you are on the main process.

Here are the steps involved:

• You need to have access to the session object which can be obtained by one of two ways:

  A) via the global session.defaultSession which is available after the app is ready.

   const { session } = require('electron');
   const curSession = session.defaultSession;
  

  B) The other method is via the session on the BrowserWindow, this assumes that the windnows is already created.

   win = new BrowserWindow({});
   const curSession = win.webContents.session;
  

• Once you have the session object you set the response header to the site you are sending the request from.

  For example, let's say your electron BrowserWindow is loaded from http://localhost:3000 and you are making a request to example.com, here would be some sample code:

   const { app, BrowserWindow, session } = require('electron');
   app.whenReady().then(_ => {
        // If using method B for the session you should first construct the BrowserWindow
        const filter = { urls: ['*://*.example.com/*'] };
  
        session.defaultSession.webRequest.onHeadersReceived(filter, (details, callback) => {
  
            details.responseHeaders['Access-Control-Allow-Origin'] = [ 'http://localhost:3000' ];
            callback({ responseHeaders: details.responseHeaders });
        }
        // Construct the BrowserWindow if haven't done so yet...
    });