Spring Boot内置登录页时Angular指向配置及Http解析错误咨询

报错根因 #

你遇到的Http failure during parsing报错是因为Angular HttpClient默认将响应按JSON格式解析，而你请求的http://localhost:8080/返回的是HTML格式的登录页，类型不匹配导致解析失败。

修复方案 #

1. 临时解决请求报错 #

如果你确实需要通过接口获取登录页的HTML内容，只需要修改login.service.ts中的请求配置，指定响应类型为文本即可：

// login.service.ts
public getLoginPage(): Observable<string> {
  return this.http.get(this.apiServerUrl, { responseType: 'text' });
}

2. 正确配置跳转至Spring Boot登录页 #

如果你不需要在Angular页面内嵌套登录页，只是要访问Spring Boot托管的登录页，完全不需要用HttpClient请求内容，直接做页面跳转即可，两种常用实现方式：

• 直接按钮跳转
  修改登录组件的点击逻辑，删除无用的HTTP请求代码：

// login.component.ts
public goToLogin(): void {
  window.location.href = 'http://localhost:8080';
}

对应修改login.component.html的按钮绑定：

<button (click)="goToLogin()" class="btn btn-primary">Login</button>

• 路由规则跳转
  如果你希望访问Angular的/login路由时自动跳转到Spring Boot登录页，可以通过路由守卫实现：
  首先创建路由守卫：

// login-redirect.guard.ts
import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class LoginRedirectGuard implements CanActivate {
  canActivate(): boolean {
    window.location.href = 'http://localhost:8080';
    return false;
  }
}

然后在路由配置文件中添加对应规则：

// app-routing.module.ts
const routes: Routes = [
  {
    path: 'login',
    canActivate: [LoginRedirectGuard]
  },
  // 其余原有路由配置保持不变
];

3. 嵌入登录页方案 #

如果你需要把Spring Boot的登录页嵌套在Angular的页面布局内，直接用iframe加载即可，不需要额外发HTTP请求：

<!-- login.component.html -->
<iframe src="http://localhost:8080" width="100%" height="800px" frameborder="0"></iframe>

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