MERN栈中Zoom OAuth2集成（ngrok与Cookie）故障排查求助

场景与环境 #

• 开发的是Zoom App（Zoom客户端内打开的Web视图类型应用），根据Zoom要求，本地开发重定向URL不能用localhost:8080，必须使用ngrok或公网URL
• ngrok已配置启动，命令为ngrok http 8080，还尝试过不同--host-header参数：--host-header=rewrite、--host-header=localhost、--host-header=localhost:8080
• 后端Express服务运行在8080端口，前端React客户端在3000端口；Express已对接Google和Zoom OAuth，Google集成使用相同中间件和路由控制器可正常工作（无需ngrok）

问题现象 #

• Zoom授权流程完成后，请求到/callback路由的流程正常，但服务器通过set-cookie头返回的Cookie未存入浏览器存储，ngrok的OAuth请求在Cookie标签中无任何记录
• 后续请求的请求头中没有cookie: ...字段，而/callback端点的初始响应头里的Cookie配置无错误信息
• 截图对比：
  • 通过Ngrok的OAuth请求：
  • 不使用Ngrok的OAuth请求：

相关代码与尝试 #

OAuth回调控制器代码 #

两种场景下都会触发该逻辑：

const oauth = catchAsync(async (req, res) => {
  const user = req.user;
  const tokens = await tokenService.generateAuthTokens(user);
  res
    .cookie('refreshToken', tokens.refresh.token, {
      maxAge: tokens.refresh.maxAge,
      httpOnly: true,
      sameSite: "none",
      secure: true,
      // domain: "8796-2603-6011-223-7a04-2830-4c71-6f20-54c0.ngrok.io" // test
    })
    .redirect(`${config.clientURL}/app`)
});

• 尝试手动设置Cookie的domain值，包括localhost、localhost:8080、xxx.ngrok.io，均无效

Webpack DevServer配置 #

尝试将allowedHosts设为all，希望找到适配生产与开发环境的通用方案：

module.exports = {
  // Extend/override the dev server configuration used by CRA
  // See: https://github.com/timarney/react-app-rewired#extended-configuration-options
  devServer: function (configFunction) {
    return function (proxy, allowedHost) {
      const config = configFunction(proxy, allowedHost);
      // config.headers = {
      //   // "Cross-Origin-Embedder-Policy": "credentialless",
      //   // "Cross-Origin-Opener-Policy": "same-origin",
      //   // 'Cross-Origin-Resource-Policy': 'cross-origin',
      //   // 'Access-Control-Allow-Origin': '*'
      // };
      config.allowedHosts = ['all']

      return config;
    };
  },
};

额外测试 #

原本以为仅开发环境存在问题，但将生产API URL添加到Zoom应用门户的OAuth重定向/允许主机列表后，生产环境测试仍出现相同的Cookie无法存储问题。

有没有其他开发者遇到过Zoom应用的这类问题？

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