如何在Angular（Ionic 5）中对接OpenCart的有状态REST API

1. 核心配置：开启withCredentials #

Angular HttpClient默认不会自动携带跨域Cookie、也不会存储响应返回的Set-Cookie内容，要开启withCredentials属性才能实现有状态接口的Cookie自动管理，有两种配置方案：

方案一：全局拦截器统一配置（推荐） #

修改你的拦截器代码，在克隆请求时统一加withCredentials: true，同时修正你当前拦截器中事件返回缺失的问题：

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  // 克隆请求时统一添加withCredentials
  let modifiedReq = req.clone({
    withCredentials: true,
    // 原有逻辑可保留
    headers: this.globalVar.loginInfo !== '' ? req.headers.append('observe', 'response' as 'response') : req.headers
  });

  return next.handle(modifiedReq).pipe(
    map((event: HttpEvent<any>) => {
      if (event instanceof HttpResponse) {
        const camelCaseObject = mapKeys(event.body, (v: any, k: any) => camelCase(k));
        return event.clone({ body: camelCaseObject });
      }
      // 必须返回非响应类事件，否则会抛出异常
      return event;
    })
  );
}

方案二：单个请求单独配置 #

如果你不需要全局开启，也可以在POST方法的第三个参数中单独添加配置：

public POST(url: string, data: any): Observable<any> {
try {
  if (this.networkService.getCurrentNetworkStatus() === ConnectionStatus.Offline) {
    this.toast.toastShow(`No internet connectivity. Please try again later.`);
    return of(null);
  } else {
    return this.http.post<responseModel>(url , data, {
      // 单独开启凭证携带
      withCredentials: true
    }).pipe(
      map((response) => {
        return response;
      }),
      catchError(async (error) => this.handleErrors(error, this.globalVar.apiUrl + url + this.globalVar.urlKey))
    );
  }
} catch (error) {
  return of(null);
}}

2. 后端OpenCart侧CORS配置要求 #

带凭证的跨域请求对后端响应头有强制要求，必须在OpenCart的接口响应头中添加以下配置：

• Access-Control-Allow-Origin：不能设置为*，必须填写前端的实际访问域名（比如本地调试填http://localhost:8100，线上填你的前端域名）
• Access-Control-Allow-Credentials：必须设置为true
• Access-Control-Allow-Headers：需要包含你请求中用到的所有自定义头字段
• 如果是跨站场景，Cookie的SameSite属性需要设置为None; Secure，同时必须走HTTPS协议

3. 验证排查步骤 #

配置完成后可按以下顺序排查问题：

• 打开浏览器开发者工具，在「网络」面板查看登录接口的响应头，确认Set-Cookie字段存在且没有被浏览器拦截（如果有警告会直接标注原因）
• 查看「应用/存储」面板的Cookie列表，确认OpenCart返回的PHPSESSID等Cookie已经被正确存储
• 查看后续请求的请求头，确认Cookie字段已经自动携带了存储的会话Cookie

4. Ionic移动端打包注意事项 #

如果是打包为APP运行：

• 如果你使用Capacitor，可在capacitor.config.ts中配置server.hostname为你后端接口的一级域名，避免跨域问题
• 不要使用Cordova的cordova-plugin-advanced-http插件替代Angular HttpClient，否则会丢失浏览器自动管理Cookie的能力

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