在離子/角度中添加 http 攔截器后翻譯不起作用

Question

翻譯在本地機器上運行良好。 但是，當我使用 ionic 生成 apk 並將其安裝在設備中時，它無法正常工作。 它正在引發錯誤。

我在下面添加了代碼。 如果缺少某些東西，請糾正我

// 這是我用於 HTTP 攔截器的代碼

import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpRequest, HttpResponse, HttpHandler, HttpErrorResponse, HTTP_INTERCEPTORS, HttpHeaders } from '@angular/common/http';
import { Router } from '@angular/router';
import { HttpClient } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { map, catchError } from 'rxjs/operators';
import { Storage } from '@ionic/storage';

import consts from './consts';

@Injectable()
export class ApiHttpInterceptor implements HttpInterceptor {
  constructor(private router: Router, public http: HttpClient, public storage: Storage) { }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const token = this.storage.get('token');
    const refreshToken = this.storage.get('refresh-token');

    request = request.clone({
      setHeaders: {
        Authorization: 'Bearer ' + token,
        // 'Content-Type': 'application/json',
        // Accept: 'application/json',
      },
      url: request.url.indexOf('http') >= 0 ? request.url : consts.API_URL + request.url,
    });

    return next.handle(request).pipe(
      map((event: HttpEvent<any>) => {
        return event;
      }),
      catchError((error: HttpErrorResponse) => {
        console.log('HttpErrorResponse', error);
        if (error.status === 401) {
          this.storage.clear();
          this.router.navigate(['/login']);
        }
        return throwError(error);
      }),
    );
  }
}

// 這是我用於翻譯加載器的代碼

export function createTranslateLoader(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

// 這是我在 app.module.ts 中使用的代碼

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    HttpClientModule,
    TranslateModule.forRoot({
      defaultLanguage: 'en',
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    }),
    IonicStorageModule.forRoot({ name: 'da-merchant', driverOrder: ['indexeddb', 'sqlite', 'websql'] }),
    ComponentsModule
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    Events,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: ApiHttpInterceptor,
      multi: true,
    },
  ],
  bootstrap: [AppComponent]
})

環境

    "@angular/common": "~9.1.6",
    "@angular/core": "~9.1.6",
    "@angular/forms": "~9.1.6",
    "@angular/platform-browser": "~9.1.6",
    "@angular/platform-browser-dynamic": "~9.1.6",
    "@angular/router": "~9.1.6",
    "@capacitor/android": "^2.4.0",
    "@capacitor/core": "2.4.0",
    "@capacitor/ios": "^2.4.0",
    "@ionic-native/core": "^5.0.7",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^5.0.0",
    "@ionic/storage": "^2.3.0",
    "@mdi/font": "^5.5.55",
    "@ngx-translate/core": "^13.0.0",
    "@ngx-translate/http-loader": "^6.0.0",
    "rxjs": "~6.5.1",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"

這里的問題僅是當我在安裝 apk 后在設備中運行離子應用程序時。 正如我所提到的，在本地環境中它工作正常。

Answer 1

它與這條線有關：

request.url.indexOf('http') >= 0 ? request.url : consts.API_URL + request.url

對於 Ionic，頁面在本地 web 服務器中運行，該服務器在某個 localhost 端口上運行。 翻譯 URL 與當前的 URL 相關，因此沒有“http”。 因此，您的代碼將此請求發送到后端。

如果我是你，我會刪除這行代碼並在調用時設置正確的 URL。 就像您調用后端一樣，您只需編寫consts.API_URL + '...'

Answer 2

感謝@MauriceNino 的提示

我通過以下代碼修復了它

export function HttpLoaderFactory(http: HttpClient) {
  const path = window.location.origin + '/assets/i18n/';
  return new TranslateHttpLoader(http, path, '.json');
}

問題出在路徑/網址上。 在本地環境中，它命中https://localhost:8100/但在真實設備中，它僅命中https://localhost/ 。 沒有端口號。

我自己回答，因為它可能會幫助有類似問題的人。