Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do you handle CORS in an electron app?

Tags:

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. :)

like image 238
Shagymoe Avatar asked Jul 09 '18 22:07

Shagymoe


People also ask

How do you protect the Electron source code?

While Electron can obfuscate code, performance is reduced. The V8 JavaScript engine as not designed to hide source code, an application will need to be written in C++ and make a native Node module to protect source code.

Is postman written in Electron?

As most people know, Postman is made in Electron. However, it does not run into CORS issues when attempting to make API calls. If a normal user packaged a simple electron app that made API calls using Fetch/XHR however, they will be blocked by endpoints that have a CORS policy.

Are Electron apps open source?

Electron is an open-source framework for creating desktop apps using web technologies. It combines the Chromium rendering engine and the Node. js runtime.


2 Answers

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

like image 97
Tuan Nguyen Avatar answered Sep 18 '22 11:09

Tuan Nguyen


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(); }); 
like image 38
psyklopz Avatar answered Sep 22 '22 11:09

psyklopz