无法通过 WebRequest 侦听 url 更改或将在 Electron 应用程序上导航答案

【问题标题】：Unable to listen for url changes via WebRequest or will-navigate on Electron app无法通过 WebRequest 侦听 url 更改或将在 Electron 应用程序上导航
【发布时间】：2022-01-11 02:18:18
【问题描述】：

我正在尝试在 Electron 应用上设置 OAuth authentication。在 Discord 授予 code 后，我想将用户重定向到 http://localhost:1212/auth/discord?code=xxxxxxxxxxxxxxxx url（电子）。之后我想监听 URL 变化，获取code 并继续进行身份验证。

我尝试过使用onBeforeRequest 的WebRequest：

session.defaultSession.webRequest.onBeforeRequest(filter, function (details, callback) {
  const url = details.url;
  // process the callback url and get any param you need
  console.log(url);
  // don't forget to let the request proceed
  callback({
    cancel: false
  });
});

还有will-navigate 事件：

authWindow.webContents.on('will-navigate', function (event, newUrl) {
    console.log(newUrl);
    // More complex code to handle tokens goes here
});

问题在于代码仅在应用启动时检测 URL 更改。也就是说，console.log(url) 在启动时给出了这个：

http://localhost:1212/index.html
http://localhost:1212/renderer.dev.js
http://localhost:1212/e227b7535d8985229f67.ttf
http://localhost:1212/561d6473df8929bca8c0.ttf
http://localhost:1212/index.html

但是当我尝试去http://localhost:1212/auth/discord?code=xxxxxxxxxxxxxxxxxx 时，我会收到这样的回复（不是来自onBeforeRequest 或will-navigate）：

Rewriting GET /auth/discord?code=xxxxxxxxxxxxxxxxxxxxx to /index.html
Rewriting GET /auth/discord?code=xxxxxxxxxxxxxxxxxxxxx to /index.html
Rewriting GET /auth/discord?code=xxxxxxxxxxxxxxxxxxxxx to /index.html

根本没有检测到访问http://localhost:1212/index.html。我正在使用electron-react-boilerplate。

【问题讨论】：

标签： electron

【解决方案1】：

似乎 Electron 仅在源自 Electron 主窗口的窗口内跟踪此类事件。也就是说，如果您只是通过浏览器打开 localhost 应用程序，它不会跟踪事件。

我的解决方案是创建一个特殊的 HTTP 服务器并将其捆绑到应用程序中。服务器负责接受 OAuth 代码。

【讨论】：