对 Google OAuth 端点的请求重定向到 Firefox 中的空白页面答案

【问题标题】：Request to Google OAuth endpoint redirects to a blank page in Firefox对 Google OAuth 端点的请求重定向到 Firefox 中的空白页面
【发布时间】：2022-10-07 08:17:24
【问题描述】：

我已经在本地部署了一个 React (CRA) + Node JS 应用程序（使用 create-react-app 构建脚本），我已经使用 passportjs 和 cookieSession 实现了 Google OAuth 登录以实现持久性。

登录工作正常，但是当我注销然后尝试登录时出现一个奇怪的错误再次使用 google OAuth，它只是将我重定向到一个空白页面。这只发生在Firefox中，在 chrome 中没有问题。

这就是我向我的 google oauth 端点发出请求的方式：

window.open(\'https://localhost:3000/auth/google\', \"_self\")

然后该端点由我的 API 获取：

app.get(\'/auth/google\', passport.authenticate(\'google\', { scope: [\'profile\', \'email\'] }));

进行一些故障排除，起初似乎罪魁祸首是cookie，因为当我在尝试再次登录之前使用firefox中的clear cookies and site data按钮删除它们时......然后登录就可以了。

但是，如果我只删除 cookie（通过存储面板 -> cookie -> 全部删除），错误仍然存在，只有当我使用 firefox 中的 clear cookies and site data 按钮时它才会消失。

此外，我第二次尝试登录请求时不要事件到达我的服务器。

我已经尝试过的：

将我的登录按钮包装在一个锚标记内，并将锚的标记href 设置为端点url。
创建一个锚标记并使用端点 url 分配一个 href，然后以编程方式单击该新元素。
这些都不起作用，问题仍然存在。
新的 firefox 配置文件：这甚至很奇怪，当我第一次尝试在新创建的配置文件中使用 google 登录时，就会出现该错误。同样，我必须先单击clear cookies and site data 按钮才能使其工作。
隐身模式：问题仍然存在，我第一次登录时它仍然有效，但第二次将我重定向到空白页面，请求甚至没有到达我的服务器。
这里可能是什么问题？

一些注意事项：
- 我在本地主机上，客户端和服务器都在同一个来源。
- 此错误仅发生在 Firefox 中。

标签： firefox caching cookies oauth-2.0

【解决方案1】：

问题是 creat-react-app 模板附带的服务工作者，但是我不想完全禁用它，因为我希望我的应用程序成为 PWA，所以下一个最好的事情是禁用服务工作者缓存专门针对用户启动 Google 登录的页面（google 按钮所在的页面）。

为此，我必须安装 sw-precache 包，它允许您修改 create-react-app 模板附带的默认服务工作者（因为您不能直接修改它）。

然后你必须在你的项目的根目录创建一个配置文件并添加这些行，在这种情况下我称之为sw-precache-config.js：

module.exports = {
  runtimeCaching: [
    {
      urlPattern: /<the route to ignore>/,
      handler: 'networkOnly'
    }
  ]
};

然后在你的包 json 的构建脚本中：

"build": "react-scripts build && sw-precache --config=sw-precache-config.js"

【讨论】：