React Native复用Express+PassportJS谷歌登录API遇跳转异常求助

错误提示Cannot GET /auth/google/myapp:app//login的核心原因是：Express将自定义URI Scheme myapp://app/login 当成了相对路径，自动拼接到当前请求的/auth/google/callback路径后，生成了错误的路由地址。

1. 修复后端重定向逻辑 #

Express的res.redirect默认会把非http/https开头的地址视为相对路径，必须明确告诉它这是绝对URI。修改/auth/google/callback的处理代码：

// 原错误写法（触发相对路径拼接）
res.redirect('myapp://app/login');

// 正确写法一：指定状态码强制绝对路径处理
res.redirect(302, 'myapp://app/login');

// 正确写法二：直接设置Location响应头
res.set('Location', 'myapp://app/login');
res.sendStatus(302);

2. 在React Native WebView中拦截自定义Scheme跳转 #

WebView会尝试加载myapp://开头的地址，这会导致错误，必须提前拦截并处理登录结果：

import { WebView } from 'react-native-webview';

// 示例组件代码
function GoogleLoginWebView() {
  const handleNavigation = (navState) => {
    const url = navState.url;
    if (url.startsWith('myapp://')) {
      // 解析携带的认证参数（比如token）
      const queryParams = new URLSearchParams(url.split('?')[1] || '');
      const authToken = queryParams.get('token');
      
      // 这里处理登录成功逻辑：保存token、跳转首页等
      console.log('获取到认证token:', authToken);
      
      // 停止WebView加载并关闭弹窗/页面
      // 可通过状态控制WebView的显示状态
    }
  };

  return (
    <WebView
      source={{ uri: 'https://你的后端域名/auth/google' }}
      onNavigationStateChange={handleNavigation}
      allowUniversalAccessFromFileURLs={true}
    />
  );
}

3. 后端传递认证信息到客户端 #

在Passport认证成功后，生成JWT或会话token，拼接到重定向地址中，让客户端能拿到认证凭证：

app.get('/auth/google/callback', 
  passport.authenticate('google', { failureRedirect: '/login' }),
  (req, res) => {
    // 生成用户认证token（根据你的业务逻辑实现）
    const authToken = generateAuthToken(req.user);
    // 重定向到带参数的自定义Scheme地址
    res.redirect(`myapp://app/login?token=${authToken}`);
  }
);

4. 确认React Native的URI Scheme配置 #

确保项目已正确注册myapp Scheme：

• iOS：在Info.plist中添加LSApplicationQueriesSchemes和CFBundleURLTypes配置
• Android：在AndroidManifest.xml的<activity>标签内添加对应<intent-filter>

• 谷歌开发者控制台中，OAuth的授权回调地址必须设置为https://你的后端域名/auth/google/callback，与后端配置一致
• WebView需开启对应权限，避免自定义Scheme跳转被拦截

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