Angular Electron桌面应用无法向Node.js服务器发起请求求助

嘿，我之前也碰到过Electron结合Angular时的跨域请求坑，你的情况大概率是Electron窗口的源未被包含在Node.js服务器的CORS允许列表中导致的。

问题根源 #

网页端运行时，你的Angular应用是在http://localhost:4200这类HTTP协议的源下，已经被你添加到CORS的origin数组里了，所以请求正常。但Electron加载打包后的Angular应用时，默认使用的是file://协议（本地文件加载），这个源不在你的CORS配置里，服务器自然就拒绝了跨域请求。

下面给你几个可行的解决方案，按需选择：

解决方案1：修改CORS配置，添加file://源 #

这是最简单直接的方法，适合开发和生产环境，只需要把Electron的file://源加入服务器的CORS允许列表：

app.use(cors({ 
  origin: [
    'http://localhost:4200',
    'http://localhost:8085',
    'http://192.168.1.174:8085', 
    'http://127.0.0.1:4200',
    'file://' // 新增这个Electron默认源
  ], 
  credentials: true 
}));

修改后重启Node服务器，再运行Electron应用，应该就能正常发起请求了。

解决方案2：关闭Electron的跨域安全检查（仅开发环境推荐） #

如果只是开发阶段测试，不想折腾服务器配置，可以在Electron主进程创建窗口时，临时关闭跨域安全验证：

const { BrowserWindow } = require('electron');

const mainWindow = new BrowserWindow({
  width: 800,
  height: 600,
  webPreferences: {
    webSecurity: false, // 关闭跨域安全验证
    contextIsolation: false, // 根据你的Angular配置调整，若需Node集成可能需要开启
    nodeIntegration: true
  }
});

// 加载你的Angular打包后的index.html路径
mainWindow.loadFile('dist/your-angular-app/index.html');

⚠️ 注意：这个方法绝对不要在生产环境使用，关闭webSecurity会带来严重的安全风险，比如XSS攻击。

解决方案3：通过Electron代理转发请求（生产环境推荐） #

如果生产环境不想放宽CORS限制，可以在Electron主进程中设置一个代理，将Angular的请求转发到Node服务器，彻底绕开跨域问题：

1. 先安装http-proxy依赖：

npm install http-proxy --save

2. 在Electron主进程中添加代理代码：

const http = require('http');
const httpProxy = require('http-proxy');
const { BrowserWindow } = require('electron');

// 创建代理服务器
const proxy = httpProxy.createProxyServer({});

// 启动本地代理服务，监听3000端口
http.createServer((req, res) => {
  // 将请求转发到你的Node服务器地址
  proxy.web(req, res, { target: 'http://192.168.1.174:8085' });
}).listen(3000);

// 创建窗口
const mainWindow = new BrowserWindow({
  width: 800,
  height: 600,
  webPreferences: {
    contextIsolation: true,
    nodeIntegration: false
  }
});

// 加载Angular应用
mainWindow.loadFile('dist/your-angular-app/index.html');

3. 修改Angular中的请求地址，指向本地代理端口：

postlogindata(body: any): Observable<any> { 
  // 把原来的http://192.168.1.174:8085改成http://localhost:3000
  return this._http.post(`http://localhost:3000/login`, body, { 
    observe:'body', 
    withCredentials :true, 
    headers:new HttpHeaders().append('Content-Type','application/json') 
  }); 
}

这种方法既保证了生产环境的安全性，又完美解决了跨域问题。

内容的提问来源于stack exchange，提问作者Vinoth