在 Electron 中与 Web 服务集成

Question

我是 Electron 的新手，我即将开始使用 Electron/AngularJS 开发桌面应用程序。桌面应用程序只是 GUI，它通过 RESTful 网络服务和网络套接字与后端服务器交互。

现在我的问题是：在 Electron 中向 Web 服务发出 HTTP 请求并更新 UI 的最佳方式是什么？在普通的网络应用程序中，我只是使用类似 Angular 的 $http 服务直接与网络服务交互。但是，我无法在 Electron 中执行此操作，因为同源策略会阻止请求（根据我的理解，渲染器在 file:// origin 中运行，因此我无法与 mysite.com 通信）。

我提出了几个可能的解决方案，但它们似乎并不理想：

通过将 BrowserWindow 首选项 'web-security' 设置为 false 来禁用同源策略问题。这似乎不是一个好主意，因为如果我的 UI 代码中有任何类型的跨站点脚本，那么攻击者就可以访问我盒子上的任何文件。
通过 IPC 接口代理我所有的 HTTP 请求。然后主进程可以在不受同源策略限制的情况下发出 HTTP 请求。不过，这似乎有点矫枉过正。

我是否缺少更简单的解决方案？

Answer 1

作为替代选项，考虑启用 CORS on the server and make CORS requiests from the client。

Answer 2

from what I understand the renderer runs in the file:// origin so I cannot communicate with mysite.com

我很确定情况并非如此，file:// 可以与任何来源通信

Answer 3

视图 html 文件通过文件协议加载到 electron 中，ajax 在文件协议中不起作用。在我的例子中，我在 html 中设置了一个 IPC 事件发射器，在主进程中设置了一个 IPC 事件处理程序。一旦我需要进行任何 http 调用，我就使用事件发射器，然后从主进程发出 http 请求。请求完成后，我从主进程中创建了另一个 IPC 事件，并在 html 中处理了它。我不知道这是否是最优雅的方式，但它适用于我的情况。

// sample code in the html

<script>
    const ipc = require("electron").ipcRenderer;

    function sendAjaxCall(params){
        // handle the params 
        // and make a ipc event to the main process
        ipc.send("call-AJAX", params)
    }

    // call the sendAjaxCall function somewhere with proper params

    ipc.on("complete-AJAX", function(evt, arg){
        // process your args and handle the return data
    })
</script>


// sample code in the main js file

const ipc = require("electron").ipcMain;
const request = require("request"); // request is not required, but I found it quite fascinating...


ipc.on("call-AJAX", function(evt, arg){
    // process the args and make the ajax call
    request("http://some-url.com/some/endpoint/", function(e, resp, body){
        // handle the response
        // send ipc event to renderer process
        ipc.send("complete-AJAX", resp)
    })
})

警告上面的代码只是一些样板代码，可以让您了解基本概念。我在媒体 Electron’s IPC Modules and How to Use Them 上找到了一篇很棒的文章，您可以在其中对 IPC 有一些基本的了解。

更多资源-

在 Electron 中与 Web 服务集成

Integrating with web services in Electron

web-services

node.js

angularjs

electron