0

I have a web app wrapped with electron. The electron app filters web requests and redirects them to handle by local https server.

session.defaultSession.webRequest.onBeforeRequest({urls:["*://capture.api.url/*"]}, (details, callback) => {
// here all matching filter requests will end up e.g. https://capture.api.url/test

    const url = new URL(details.url);
// redirect to the local https server
    callback({
      redirectURL: `https://localhost:12345${url.pathname}${url.search}${url.hash}`
    });
});

This bit works but only for GET method, request is then handled by the server

    const httpsOptions = {
      key: fs.readFileSync(path.join(__dirname, "server-key.pem")),
      cert: fs.readFileSync(path.join(__dirname, "server-cert.pem"))
    };
    this.server = https.createServer(
      httpsOptions,
      (req /* : IncomingMessage */, res /* : ServerResponse */) => {
            // add CORS headers
            res.setHeader("Access-Control-Allow-Origin", "*");
            res.setHeader(
              "Access-Control-Allow-Methods",
              "GET,POST,PUT,PATCH,DELETE,HEAD,OPTIONS"
            );
            res.setHeader(
              "Access-Control-Allow-Headers",
              "Content-Type, Origin, Accept, Authorization, Content-Length, X-Requested-With"
            );
            // handle request...
            res.writeHead(200);
            res.end();
      }
    );
    this.server.listen(port);

This work like I've mentioned for a GET request, but for POST the pre-flight OPTIONS request is issued. Which is then redirected and it fails without even reaching my local server with following error in console:

Access to XMLHttpRequest at 'https://capture.api.url/search' from origin 'http://localhost:3001' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.

Worth to mention is that it happens during development, where web app is build and run on separate process and served on localhost:3001 and electron app is loading the app from that endpoint.

mainWindow.loadURL(
      isDevMode ? "http://localhost:3001" : `file://${__dirname}/app/index.html`
    );

It works fine (so far) when it is not a dev mode. Is there a way to disable this preflight check? Or correct it somehow so it doesnt fail.

Lukasz 'Severiaan' Grela
  • 6,078
  • 7
  • 43
  • 79

1 Answers1

0

Seems to work, however I'm not sure this is the right way

  // Define our main window size
  mainWindow = new BrowserWindow({
    height: 920,
    width: 1600,
    show: false,
    webPreferences: {

      // turn off webSecurity when in dev mode
      webSecurity: !isDevMode,



      allowEval: false,
      nodeIntegration: true,
      preload: path.join(
        __dirname,
        "node_modules",
        "@capacitor",
        "electron",
        "dist",
        "electron-bridge.js"
      )
    }
  });

I will still wait for other answers, in the meantime I'll use this "hack".

Lukasz 'Severiaan' Grela
  • 6,078
  • 7
  • 43
  • 79
  • Hey, I am facing same issue in react-electron app with axios. I am using electron v11.0.5. Above solution is not working for me. – Vishal Rajole Dec 12 '20 at 19:40