请问下这种情况跨域可以解决吗?

27 min read

A:Electron App 通过接口访问 A 的服务端

B:Web App 通过接口访问 B 的服务端

两者(前端及服务器)都没有源码。

Electron 中访问 Web App 中的 api 时提示跨域,报错。(其实就是我在 开发者工具 的 console 通过 fetch 访问了)

这种情况下的跨域可以解决吗?(无法修改服务端代码)

是否只能通过代理服务器来解决了?

这种情况下的跨域是由于浏览器的同源策略导致的,涉及到跨域请求,需要其他解决方案。

在这种情况下,您所提到的使用代理服务器是一个可行的解决方案。您可以在您的 Electron App 中添加一个代理服务器,该代理服务器可以将来自 Web App 的请求转发到 B 的服务端,并将响应返回给 Electron App。这个代理服务器可以使用 Node.js 中的 express 框架实现。

具体地,您可以做以下步骤:

  1. 在 Electron App 中添加 express 框架,并用 express 实现一个路由,该路由将转发所有来自 Web App 的请求。

  2. 将该路由挂载到 Electron App 中,使得 Electron App 可以接收来自 Web App 的请求,并将其转发到 B 的服务端。

  3. 当 B 的服务端响应时,将响应发送回 Electron App,并最终返回给 Web App。

需要注意的是,在这个过程中,您还需要设置 Electron App 的 Electron net 模块的 corsEnabled 属性为 true,以允许 Electron App 接收来自跨域请求的响应。

参考代码:

const express = require('express');
const { app } = require('electron');
const fetch = require('node-fetch');

const proxy = express();

proxy.use((req, res) => {
  const url = 'http://domain-b.com' + req.originalUrl;
  fetch(url, {
    headers: req.headers,
    method: req.method,
    body: req.body,
  }).then((response) => {
    res.status(response.status);
    response.headers.forEach((value, name) => {
      res.setHeader(name, value);
    });
    response.body.pipe(res);
  });
});

app.on('ready', () => {
  proxy.listen(3000, () => {
    console.log('Server started on port 3000');
  });
});