如何在电子应用程序中处理CORS？

Question

我正在构建一个电子应用程序，需要调用API提供者没有启用CORS的API。通常提出的解决方案是使用反向代理，这在使用节点和cors在本地运行时非常简单--如下所示：

let port = (process.argv.length > 2) ? parseInt (process.argv[2]) : 8080; 
require ('cors-anywhere').createServer ().listen (port, 'localhost');

然后，应用程序可以配置为通过本地主机8080上的反向代理代理所有请求。

所以，我的问题是：

1. 是否有可能使用节点和cors-在电子应用程序中的任何地方创建反向代理？我不想强迫应用程序调用远程服务器。
2. 在电子应用程序中，是否有更好的或标准的方法来做到这一点？我想我不是第一个遇到CORS问题的人。:)

Answer 1

只需在使用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 })
});

​

将这些代码放入渲染程序进程中

Answer 2

在我的应用程序中，仅在请求中删除Origin头(通过将其设置为null)是不够的。我传递请求的服务器总是在响应中提供Access-Control-Allow-Origin头，不管它是什么，Origin头都在请求中。因此，Chrome的嵌入式实例不喜欢ACAO头不符合它对原点的理解。

相反，我必须更改请求的Origin头，然后在响应的Access-Control-Allow-Origin头上恢复它。

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

Answer 3

如果您在本地主机上运行web应用程序，请试一试。

const filter = {
  urls: ['http://example.com/*'] // Remote API URS for which you are getting CORS error
}

browserWindow.webContents.session.webRequest.onBeforeSendHeaders(
  filter,
  (details, callback) => {
    details.requestHeaders.Origin = `http://example.com/*`
    callback({ requestHeaders: details.requestHeaders })
  }
)

browserWindow.webContents.session.webRequest.onHeadersReceived(
  filter,
  (details, callback) => {
    details.responseHeaders['access-control-allow-origin'] = [
      'capacitor-electron://-',
      'http://localhost:3000' // URL your local electron app hosted
    ]
    callback({ responseHeaders: details.responseHeaders })
  }
)