Ionic Capacitor应用Android端无法登录问题求助

1. 修正后端JWT Cookie属性 #

这是跨域+移动端场景下最常见的问题，后端设置Cookie时必须包含以下属性：

• Secure: true：因为Heroku使用HTTPS，移动端WebView仅会存储带Secure标记的跨域Cookie
• SameSite: 'None'：跨域请求必须设置该值，否则WebView会拒绝接收Cookie
• HttpOnly: true：防止XSS攻击，同时确保Cookie仅通过HTTP请求传递
• maxAge：设置合理的过期时间

Node.js/Express示例代码：

res.cookie('jwtToken', jwt.sign(userData, secretKey), {
  httpOnly: true,
  secure: process.env.NODE_ENV === 'production',
  sameSite: process.env.NODE_ENV === 'production' ? 'None' : 'Lax',
  maxAge: 24 * 60 * 60 * 1000 // 1天有效期
});

2. 调整后端CORS配置 #

Express的CORS中间件必须开启credentials: true，且不能使用origin: '*'，需明确指定允许的前端来源（Capacitor安卓应用的默认来源为capacitor://localhost和http://localhost）：

const cors = require('cors');
const corsOptions = {
  origin: ['http://localhost:8100', 'capacitor://localhost', 'http://localhost'],
  credentials: true
};
app.use(cors(corsOptions));

3. 确保Angular请求携带Credentials #

在Angular的HTTP请求中，必须添加withCredentials: true配置，否则不会发送存储的Cookie到后端：

// 单个请求示例
this.http.post('https://mihab-back.herokuapp.com/api/mihab/users/login', loginFormData, {
  withCredentials: true
}).subscribe(response => {
  // 处理登录成功逻辑
}, error => {
  console.error('登录失败:', error);
});

// 全局拦截器示例（推荐）
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const authReq = req.clone({ withCredentials: true });
    return next.handle(authReq);
  }
}

4. 检查Capacitor配置 #

在capacitor.config.ts中添加允许访问Heroku域名的配置：

import { defineConfig } from '@capacitor/cli';

export default defineConfig({
  appId: 'com.your.app.id',
  appName: 'YourAppName',
  webDir: 'www',
  server: {
    allowNavigation: ['mihab-back.herokuapp.com'],
    cleartextTrafficEnabled: false // 后端为HTTPS时设为false，HTTP设为true
  }
});

同时确认安卓AndroidManifest.xml中已添加网络权限：

<uses-permission android:name="android.permission.INTERNET" />

5. 调试验证请求细节 #

• 查看后端日志：在Heroku后台查看应用日志，确认登录请求是否到达后端，以及请求中是否携带Cookie（登录请求第一次是提交账号密码，后端返回Cookie；后续请求才会携带Cookie）
• WebView远程调试：在Chrome中打开chrome://inspect/#devices，连接模拟器/真机后，查看应用WebView的Application -> Cookies，确认后端返回的Cookie是否被正确存储

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