如何在基于角度的cordova应用程序中正确处理X-CSRF-TOKEN？

问题描述

我有一个Angular（v10）WebApp，它可以通过在导入中使用HttpClientXsrfModule来正确处理X-CSRF-TOKEN cookie，如Angular Guide所述，即：

  // app.module.ts
HttpClientModule,HttpClientXsrfModule.withOptions({
  cookieName: 'XSRF-TOKEN',headerName: 'X-XSRF-TOKEN',}),

，然后在我的服务请求中设置相对路径，例如：

  // some service.ts
  public deleteX(x_id: number): Observable<any> {
      return this.httpClient.delete(`api/X/${x_id}`);
  }

现在，浏览器本身可以处理从服务器中获取令牌并成功通过随后的每个POST / DELETE / PUT / PATCH请求发送令牌的情况。

但是，如果我现在使用cordova将应用程序编译为Android应用程序，则该应用程序将请求（x_id = 1068）发送到file:///android_asset/www/api/X/1068。我可以修改http服务以轻松使用特定于平台的绝对/相对路径，例如：

  // some service.ts
  public deleteX(x_id: number): Observable<any> {
    if (this.cordovaService.platform === CordovaService.PLATFORM_ANDROID) {
      return this.httpClient.delete(`${environment.baseUrl}/api/X/${x_id}`);
    } else {
      return this.httpClient.delete(`api/X/${x_id}`);
    }
  }

但是，然后，我对Android应用程序的请求是

error: "access_denied"
error_description: "Invalid CSRF Token 'null' was found on the request parameter '_csrf' or header 'X-XSRF-TOKEN'."

我该怎么做，以便为我的cordova编译的Android应用程序正确处理X-XSRF-TOKEN？

解决方法

我最终使用了cordova-plugin-advanced-http，它提供了here所述的获取响应cookie的机会。我为每个HTTP方法（GET，HEAD，PATCH，PUT，POST，DELETE）创建了一个通用HTTP服务，其中包含通用方法，该方法首先检查运行中的平台，然后转发调整后的请求。 >

通用GET（伪代码）示例：

// generic-http-service.ts
   
public get<T>(url: string,queryParams?: any): Observable<T> {
   if (this.cordovaService.platform === CordovaService.PLATFORM_ANDROID) {
       // android-specific solution
       // 1. adjust params
       // 2. set general headers + the XSRF-TOKEN from the previous sendt request
       // 3. return Observable(obs) {
       // 4. send:
       cordova.plugin.http.get(`${environment.baseUrl}/${url}`,adjustedParams,adjustedHeaders,successResponse => { 
                  // 5. fetch & save XSRF-TOKEN
                  obs.next(JSON.parse(successResponse.data) as T);
              },errorResponse => { 
                  obs.error(errorResponse);
              })
       }
   } else {
       // web-specific solution based on the angular guide
       return this.httpClient.get(`${url}`);
   }
}

然后，我只需要稍微调整一下服务即可。

android android angular csrf