Spring Boot返回字符串到Angular触发HttpErrorResponse错误如何解决？

• Angular的HttpClient默认会把所有响应内容按JSON格式解析，你后端返回的纯文本字符串user/admin不符合JSON语法，所以触发解析错误。
• 之前返回整数可以正常运行，是因为纯数字本身属于合法的JSON值，解析不会报错。

两种方案选其一即可：

方案1：调整前端请求配置，指定响应类型为纯文本 #

修改login-form.component.ts中的post请求，新增responseType: 'text'配置，修改后代码如下：

login() {
    let url = 'http://localhost:8080/login';
    this.http.post(url, {
    username: this.model.username,
    password: this.model.password
}, { responseType: 'text' }) // 新增响应类型配置
.subscribe(resp => {
    console.log(resp);
    switch(resp){
      case "admin": {
        this.router.navigateByUrl('/actions', { state: { username: this.model.username , role:'admin' } });
      break;
      }
      case "user": {
        this.router.navigateByUrl('/actions', { state: { username: this.model.username , role:'user' } });
      break;
      }
      default:
        alert("Authentication failed.");
    } 
    });
  }

方案2：调整后端返回结构，返回合法JSON格式 #

Spring Boot接口不再直接返回字符串，而是封装成对象返回，示例写法如下：

// 定义统一返回对象
public class LoginResult {
    private String role;
    // 省略构造方法、getter、setter
}

// 接口逻辑示例
@PostMapping("/login")
public LoginResult login(@RequestBody LoginRequest request) {
    // 认证逻辑省略
    if (isAdmin) return new LoginResult("admin");
    if (isUser) return new LoginResult("user");
    return new LoginResult("fail");
}

对应前端再调整接收逻辑，定义匹配的接收类型即可。

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