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:
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.
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. :)
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.
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.
Electron is an open-source framework for creating desktop apps using web technologies. It combines the Chromium rendering engine and the Node. js runtime.
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
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(); });
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With