Ionic 3在iOS平台无法发送会话Cookie问题求助

我最近碰到一个头疼的问题——仅在iOS平台上，用户登录后后续的HTTP请求里Ionic没法自动发送会话Cookie，但Android版本完全正常，我的整个系统都是基于会话Cookie做身份验证的。

我的Ionic环境信息如下：

cli packages: (/usr/local/lib/node_modules)
    @ionic/cli-utils : 1.19.1
    ionic (Ionic CLI) : 3.19.1
global packages:
    cordova (Cordova CLI) : 8.0.0
local packages:
    @ionic/app-scripts : 3.1.4
    Cordova Platforms : android 6.3.0 ios 4.5.4
    Ionic Framework : ionic-angular 3.9.2
System:
    ios-deploy : 1.9.2
    ios-sim : 6.1.2
    Node : v8.9.0
    npm : 5.5.1
    OS : macOS Sierra
    Xcode : Xcode 9.2 Build version 9C40b

更新：我已经尝试在请求里设置withCredentials: true，但问题依然存在。

针对这个iOS平台特有的Cookie问题，我整理了几个经过实践验证的解决思路，你可以逐一尝试：

1. 配置WKWebView的Cookie同步策略 #

iOS默认的WKWebView在Cookie存储和跨域发送上有严格限制，这是最常见的问题根源：

• 首先确保你已经安装了cordova-plugin-wkwebview-engine，然后在项目的config.xml中添加以下配置，强制使用WKWebView并放宽相关权限：

  <platform name="ios">
      <preference name="WKWebViewOnly" value="true" />
      <preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
      <preference name="AllowFileAccessFromFileURLs" value="true" />
      <preference name="AllowUniversalAccessFromFileURLs" value="true" />
  </platform>
  

• 安装cordova-plugin-wkwebview-cookie-sync插件来解决WKWebView的Cookie同步问题，安装完成后在App启动时调用同步方法：

  import { Platform } from 'ionic-angular';
  // 声明插件全局变量
  declare var WKWebViewCookieSync;
  
  constructor(private platform: Platform) {
      this.platform.ready().then(() => {
          if (this.platform.is('ios')) {
              // 启动时同步Cookie
              WKWebViewCookieSync.sync();
          }
      });
  }
  

2. 修正服务器端的Cookie响应头配置 #

服务器端的Cookie属性设置不当会导致iOS拒绝存储或发送Cookie，需要调整以下几点：

• 确保Domain属性与请求域名完全匹配，不要添加多余的前缀（比如你的域名是example.com就不要设成www.example.com）
• 对于跨域请求，必须设置SameSite=None，同时搭配Secure属性（仅当使用HTTPS时有效），iOS的WKWebView对跨域Cookie的限制非常严格：

  Set-Cookie: sessionId=your_session_value; Domain=example.com; Path=/; Secure; SameSite=None; HttpOnly
  

• HttpOnly是安全属性，不会影响Cookie自动发送，建议保留。

3. 全局配置HTTP请求的withCredentials #

仅在单个请求里设置withCredentials: true可能不够，最好通过Angular的HTTP拦截器全局配置：

• 创建一个拦截器文件credentials.interceptor.ts：

  import { Injectable } from '@angular/core';
  import { HttpInterceptor, HttpRequest, HttpHandler } from '@angular/common/http';
  
  @Injectable()
  export class CredentialsInterceptor implements HttpInterceptor {
      intercept(req: HttpRequest<any>, next: HttpHandler) {
          // 克隆请求并添加withCredentials配置
          const authReq = req.clone({
              withCredentials: true
          });
          return next.handle(authReq);
      }
  }
  

• 在app.module.ts中注册这个拦截器：

  import { HTTP_INTERCEPTORS } from '@angular/common/http';
  import { CredentialsInterceptor } from './interceptors/credentials.interceptor';
  
  @NgModule({
      providers: [
          {
              provide: HTTP_INTERCEPTORS,
              useClass: CredentialsInterceptor,
              multi: true
          }
      ]
  })
  export class AppModule { }
  

4. 清理缓存并重新测试 #

有时候旧的Cookie缓存会导致异常，你可以：

• 彻底卸载iOS设备上的App，然后重新安装
• 在Xcode中执行Product > Clean Build Folder清理构建缓存，再重新编译运行

这些方法基本能覆盖大部分iOS平台下Ionic不发送会话Cookie的场景，建议先从服务器端Cookie配置和WKWebView插件配置入手，这两个是最容易出问题的环节。

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