A:Electron App 通过接口访问 A 的服务端
B:Web App 通过接口访问 B 的服务端
两者(前端及服务器)都没有源码。
Electron 中访问 Web App 中的 api 时提示跨域,报错。(其实就是我在 开发者工具 的 console 通过 fetch 访问了)
这种情况下的跨域可以解决吗?(无法修改服务端代码)
是否只能通过代理服务器来解决了?
这种情况下的跨域是由于浏览器的同源策略导致的,涉及到跨域请求,需要其他解决方案。
在这种情况下,您所提到的使用代理服务器是一个可行的解决方案。您可以在您的 Electron App 中添加一个代理服务器,该代理服务器可以将来自 Web App 的请求转发到 B 的服务端,并将响应返回给 Electron App。这个代理服务器可以使用 Node.js 中的 express 框架实现。
具体地,您可以做以下步骤:
-
在 Electron App 中添加 express 框架,并用 express 实现一个路由,该路由将转发所有来自 Web App 的请求。
-
将该路由挂载到 Electron App 中,使得 Electron App 可以接收来自 Web App 的请求,并将其转发到 B 的服务端。
-
当 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');
});
});