diff --git a/src/portal/src/app/app.module.ts b/src/portal/src/app/app.module.ts
index 9c530b6446..83dd219fe0 100644
--- a/src/portal/src/app/app.module.ts
+++ b/src/portal/src/app/app.module.ts
@@ -45,6 +45,7 @@ import { LabelsComponent } from './labels/labels.component';
 import { ProjectQuotasComponent } from './project-quotas/project-quotas.component';
 import { HarborLibraryModule } from "../lib/harbor-library.module";
 import { HTTP_INTERCEPTORS } from '@angular/common/http';
+import { BaseHrefInterceptService } from "./base-href-intercept.service";
 
 registerLocaleData(zh, 'zh-cn');
 registerLocaleData(es, 'es-es');
@@ -98,6 +99,7 @@ export function getCurrentLanguage(translateService: TranslateService) {
             multi: true
         },
         { provide: LOCALE_ID, useValue: "en-US" },
+        { provide: HTTP_INTERCEPTORS, useClass: BaseHrefInterceptService, multi: true },
         { provide: HTTP_INTERCEPTORS, useClass: InterceptHttpService, multi: true }
 
     ],
diff --git a/src/portal/src/app/base-href-intercept.service.spec.ts b/src/portal/src/app/base-href-intercept.service.spec.ts
new file mode 100644
index 0000000000..bd7d791c01
--- /dev/null
+++ b/src/portal/src/app/base-href-intercept.service.spec.ts
@@ -0,0 +1,18 @@
+import { TestBed } from '@angular/core/testing';
+import { BaseHrefInterceptService } from "./base-href-intercept.service";
+
+
+describe('BaseHrefSwitchService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [
+        BaseHrefInterceptService
+      ]
+    });
+  });
+
+  it('should be created', () => {
+    const service: BaseHrefInterceptService = TestBed.get(BaseHrefInterceptService);
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/src/portal/src/app/base-href-intercept.service.ts b/src/portal/src/app/base-href-intercept.service.ts
new file mode 100644
index 0000000000..b8e69aa456
--- /dev/null
+++ b/src/portal/src/app/base-href-intercept.service.ts
@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+import { HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http';
+import { Observable } from "rxjs";
+
+const BASE_HREF = '/api';
+enum APILevels {
+  'V1.0' = '',
+  'V2.0' = '/v2.0'
+}
+@Injectable()
+export class BaseHrefInterceptService implements HttpInterceptor {
+  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<any> {
+    let url: string = req.url;
+    // use API level v2.0
+    if (url && url.indexOf(BASE_HREF) !== -1 && url.indexOf(BASE_HREF + APILevels["V2.0"]) === -1) {
+      url = BASE_HREF + APILevels["V2.0"] + url.split(BASE_HREF)[1];
+    }
+    const apiReq = req.clone({url});
+    return next.handle(apiReq);
+  }
+}
+