解决electron + react单页应用调用localhost服务失败

逸尘️

于 2022-11-27 13:49:07 发布

阅读量1.4k

点赞数 2

分类专栏： electron React.js 文章标签： electron react.js 前端

本文链接：https://blog.csdn.net/haoaiqian/article/details/128063395

版权

React.js 同时被 2 个专栏收录

13 篇文章

订阅专栏

electron

3 篇文章

订阅专栏

博主在使用Electron构建应用时遇到了调用http://localhost:8080/api接口跨域的问题。尽管代码无误，但因同源策略限制导致请求失败。通过查阅文档，了解到可以通过设置`webPreferences.webSecurity`为`false`禁用同源策略。此外，还探讨了使用Node.js或Electron的net模块进行网络请求可以规避浏览器的同源策略限制。总结了问题的解决方案，并强调了这两种不受同源策略影响的请求方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题原因：

初次使用 electron，在本地使用node起了后台服务后，打包成exe程序安装成功，但是无法调通http://localhost:8080/api接口，又试了 http://127.0.0.1:8080/api，问题依旧没有解决。

排查后，发现代码没有任何问题。思索再三，觉得还是跟域名限制或端口限制有关。然后大概确认是受同源策略限制了，经过查阅文档，发现可通过配置 webSecurity属性来关闭同源策略限制。

然后，问题解决。

import { app, BrowserWindow } from 'electron'

mainWindow = new BrowserWindow({
 	 webPreferences: { webSecurity: false }
})

electron 官方文档 - browserwindowoptions

思考：

众所周知，electron的架构为:

electron = chromium + nodejs + native API

我想了一下，如果使用 nodejs 或者native net 发送网络请求，是可以完美规避跨域问题的。

但是由于我使用的是 react 的框架，集成了electron方案，接口调用使用的是 umi-request，所以本质上还是通过chromium媒介发送出来的请求，受到了同源策略限制。这是问题所在！

总结：

这两种发送请求的方式，都不受浏览器同源策略的影响。

通过nodejs发送网络请求
通过electron的net模块发送网络请求