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

Question

我正在构建一个电子应用程序，需要在API提供程序未启用CORS的情况下调用API。通常提出的解决方案是使用反向代理，当通过使用node和cors进行本地运行时，这样做很简单：

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

然后可以将该应用程序配置为通过localhost：8080上的反向代理来代理所有请求。

因此，我的问题是：

1. 是否可以在电子应用程序中的任何位置使用节点和cors来创建反向代理？我不想强迫应用程序调用远程服务器。

2. 在Electron应用程序中，有没有更好的方法或标准的方法？我假设我不是第一个遇到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

今天刚刚遇到这个问题，在 Electron 中捆绑的 React 应用程序中使用 axios 进行 API 调用返回 400

据我所知，Electron 调用就像对 API url 的正常调用一样，这意味着它们不受 CORS 的影响。

现在，当您使用 CORS 代理包装调用并对代理进行常规调用时，它应该会出现 400 错误，因为它不是 CORS 调用。该线程解释了为什么 cors-anywhere 会这样响应 => https://github.com/Rob--W/cors-anywhere/issues/39

实际上，在 Electron 构建之前，我从应用程序中删除了我的 CORS 代理。由于我在浏览器中进行测试，因此我仍然需要 CORS 代理进行开发。

希望这可以帮助。