How to handle CORS in an electron app

"electron" fetch cors
electron js security issues
electron enableblinkfeatures
electron disable remote
electron best practices
electron secure storage
cors file
electron preload js

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

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 })
});

Access-Control-Allow-Origin for local developement, I am trying to develop a desktop client for TargetProcess users using electron and 'Access-Control-Allow-Origin' header is present on the requested resource. I did lots of researches, It seems TP don't support CORS at all and it is critical for get and post requests with Laravel and call that method within electron app. The second issue whereby Electron actually sends 'file://' as the value of the Origin in the request does not have a solution as far as I can tell. Your options are to allow 'file://' or '*' in the Access-Control-Allow-Origin header (server side).

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.

How to allow CORS requests with webSecurity: true · Issue #19788 , The official desktop app base on Electron and creates BrowserView with "​webSecurity: true" too. BUT in official app the CORS requests  Execute createShortcut in a Squirrel event, in an Electron app. node.js,windows,powershell,electron. It took me awhile to understand how to do this myself. The Squirrel.Windows Update.exe has the ability to create shortcuts to your app for you.

Have you tried using fetch() Check how to use fetch to make a no-cors request here https://developers.google.com/web/updates/2015/03/introduction-to-fetch?hl=en

No 'Access-Control-Allow-Origin' error on for origin 'file://' · Issue , This is really counterintuitive as electron is a native application, but it's right now difficult to make no-cors requests. +1 8. You can redirect the traffic from your choosen API through your own server (in this case, node but it can be any server) and this will allow you to set the headers that control CORS yourself. So the request will actually be your app -> your server -> external API -> your server -> your app.

How to handle CORS in an electron app - node.js - html, 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  I have used electron-react-boilerplate project and this didn't have any issues with CORS during dev or production modes. I migrated to a simpler electron project as I didn't need everything that had. electron-webpack which provides a webpack setup with HMR, only a dev mode besides building the electron app for distribution via electron-builder

Electron and CORS with renderer process? : electronjs, How to handle CORS in an electron app. I'm building an electron app and need to call APIs where the API provider has not enabled CORS. working on building desktop app using angular 4 and electron and try to get authentication token for jira but i am getting back status code: 500, any help to get around this issue. i believe it is cors issue : here is request headers: :authority:somecompany.atlassian.net :method:POST :path:/rest/

Disabling Electron webSecurity - JavaScript queries, I have found a way to deal with the CORS issue in dev, by creating a NET Core and Electron/Node processes in one Desktop application would not be a good  The web application tries to connect to a remote server - which is publicly accessible and CORS is enabled. I can access the server fine using the browser, and running the web app in a browser also works. However, after wrapping it in the Electron app, it all fails. The electron app runs a local webserver (express), which hosts the files.

Comments
  • If you make your web requests in the main process (i.e. not a renderer process), you won’t need to worry about CORS. How and where are you making such requests?
  • I haven't incorporated my web app into Electron yet. It's currently just an Ember.js app which must use a reverse proxy because it's being used in a browser.
  • the "browser" in electron can be put in unsafe mode to ignore CORS. see stackoverflow.com/questions/30101537/…
  • What api you use to make a call doesn't have any bearing on circumventing CORS. It's all up to the client. In this case, browsers by default enforce CORS, while direct calls made through curl or node do not. The link you put up even says: "no-cors is intended to make requests to other origins that do not have CORS headers and result in an opaque response, but as stated, this isn't possible in the window global scope at the moment."