Bypass CORS in electron apps

Bypassing CORS in electron apps is a common requirement when you are trying to load resources from a different domain on localhost. This is because electron apps are essentially web apps running in a browser-like environment and are subject to the same-origin policy.

This can be done using onHeadersReceived event.

Add to the main process -

app.on('web-contents-created', (_, contents) => {
    const filter = {urls: ['*://*.example.com/*']};
    contents.session.webRequest.onHeadersReceived(filter, (details, callback) => {
        if (!details.responseHeaders) details.responseHeaders = {};
        // ignore if the header already exists. 
        if (Object.keys(details.responseHeaders).map(k => k.toLowerCase()).includes('access-control-allow-origin')) return;
        
        if (!details.responseHeaders['access-control-allow-origin']) details.responseHeaders['access-control-allow-origin'] = ['*'];
        if (details.method === 'OPTIONS' && !details.responseHeaders['access-control-allow-methods']) {
            details.statusLine = 'HTTP/1.1 200 OK';
            details.responseHeaders['access-control-allow-methods'] = ['GET, POST, OPTIONS'];
            details.responseHeaders['access-control-allow-headers'] = ['*'];
        }
        callback({responseHeaders: details.responseHeaders, statusLine: details.statusLine});
    });
});