Electron应用使用WebRequest或will-navigate无法监听URL变更问题

问题根因 #

该问题由electron-react-boilerplate的默认配置导致，核心原因有两个：

1. 前端使用React Router的History模式，路由跳转通过pushState/replaceState实现客户端路由，不会触发整页重载，所以仅对整页导航/跨域跳转生效的will-navigate事件不会响应
2. 开发环境下webpack-dev-server开启了historyApiFallback配置，所有不存在的服务端路径都会被重写返回index.html，你看到的Rewriting GET /auth/discord就是该配置的输出，这种服务端静默重写不会触发webRequest监听，因为前端实际拿到的还是index.html，不会发起新的页面请求

解决方案 #

方案1：改用自定义协议处理OAuth回调（官方推荐） #

Electron官方更推荐用自定义协议（比如yourapp://auth/callback）作为OAuth回调地址，完全避开前端路由干扰：

1. 主进程初始化时注册自定义协议，需在app ready前调用

app.setAsDefaultProtocolClient('yourapp');

2. 将Discord OAuth的回调地址改为yourapp://auth/discord
3. 监听协议打开事件提取code

// macOS下监听
app.on('open-url', (event, url) => {
  event.preventDefault();
  if (url.startsWith('yourapp://auth/discord')) {
    const code = new URL(url).searchParams.get('code');
    // 处理后续认证逻辑
  }
});

// Windows/Linux下监听
app.on('second-instance', (event, commandLine) => {
  const url = commandLine.pop();
  if (url?.startsWith('yourapp://auth/discord')) {
    const code = new URL(url).searchParams.get('code');
    // 处理后续认证逻辑
  }
});

方案2：监听did-navigate-in-page事件捕获前端路由变化 #

如果一定要用localhost作为回调地址，直接监听前端路由跳转事件即可，该事件可以捕获到pushState/replaceState触发的路由变化：

authWindow.webContents.on('did-navigate-in-page', (event, url) => {
  console.log('页面内路由跳转：', url);
  if (url.includes('/auth/discord?code=')) {
    const code = new URL(url).searchParams.get('code');
    // 处理后续认证逻辑
  }
});

方案3：修改webpack-dev-server配置，关闭指定路径的fallback #

如果需要服务端直接处理/auth/discord路径，修改项目中的.erb/configs/webpack.config.renderer.dev.ts文件，给historyApiFallback添加排除规则：

historyApiFallback: {
  rewrites: [
    { from: /^\/auth\/.*$/, to: (context) => context.parsedUrl.pathname },
    { from: /./, to: '/index.html' },
  ]
},

修改完成后访问/auth/discord路径不会被重写回index.html，你的onBeforeRequest和will-navigate事件即可正常触发。

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