electron > by-passer le CORS

Méthode la plus facile

webSecurity: false est la méthode la plus facile, mais ouvre une boite de Pandore du point de vue sécurité.

 

const win = new BrowserWindow({
    webPreferences: {
        webSecurity: false
    }
});

Méthode la plus efficace

const win = new BrowserWindow();
win.webContents.session.webRequest.onBeforeSendHeaders(
   (details, callback) => {
      callback({ requestHeaders: {
         Origin: '*',
         ...details.requestHeaders
         }
      });
   },
);

win.webContents.session.webRequest.onHeadersReceived((details, callback) => {
   callback({
      responseHeaders: {
         'Access-Control-Allow-Origin': ['*'],
         ...details.responseHeaders,
      },
   });
});

Et voilà.

Comment ça marche?

onHeadersReceived regarde les en-têtes. Dans cette fonction, nous remplaçons Access-Control-Allow-Origin header envoyé par le serveur par le notre.

Bypassing CORS pour les headers

win.webContents.session.webRequest.onBeforeSendHeaders(
  (details, callback) => {
    callback({ requestHeaders: { Origin: '*', ...details.requestHeaders } });
  },
);

win.webContents.session.webRequest.onHeadersReceived((details, callback) => {
  callback({
    responseHeaders: {
      'Access-Control-Allow-Origin': ['*'],
      'Access-Control-Allow-Headers': ['*'], // We use this to bypass headers
      ...details.responseHeaders,
    },
  });
});

 

Voili, voilou !

Acces-Control vs access-control

function UpsertKeyValue(obj, keyToChange, value) {
   const keyToChangeLower = keyToChange.toLowerCase();
   for (const key of Object.keys(obj)) {
      if (key.toLowerCase() === keyToChangeLower) {
         obj[key] = value; // Reassign old key
         return;
      }
   }
   obj[keyToChange] = value; // Insert at end instead
}

win.webContents.session.webRequest.onBeforeSendHeaders(
   (details, callback) => {
      const { requestHeaders } = details;
      UpsertKeyValue(requestHeaders, 'Access-Control-Allow-Origin', ['*']);
      callback({ requestHeaders });
   },
);

win.webContents.session.webRequest.onHeadersReceived((details, callback) => {
   const { responseHeaders } = details;
   UpsertKeyValue(responseHeaders, 'Access-Control-Allow-Origin',  ['*']);
   UpsertKeyValue(responseHeaders, 'Access-Control-Allow-Headers', ['*']);
   callback({ responseHeaders, });
});

 

Désormais, nous pouvons faire :

 

const response = await fetch(url);