Spring后端与Angular前端登录API调用无响应问题求助

首要修复：订阅Observable触发请求 #

Angular的HttpClient.post返回的是冷Observable，只有调用.subscribe()后才会实际发送HTTP请求。你的代码仅创建了请求Observable但未订阅，导致请求未执行，自然拿不到返回结果。

修改后的前端代码：

login() {
  const body = {"email": "string", "password": "string"};
  this.http.post('http://localhost:8080/login', body, {responseType: 'text'})
    .pipe(map(user => {
      console.log("user : ", user);
      return user;
    }))
    .subscribe({
      next: (res) => console.log('响应结果:', res),
      error: (err) => console.error('请求错误:', err)
    });
  console.log("userService");
}

额外排查项 #

1. 响应类型不匹配 #

后端返回的是字符串"Allo"，但原前端代码指定了responseType: 'json'，Angular会尝试将字符串解析为JSON，触发解析错误。改为responseType: 'text'即可匹配后端返回格式。

2. 跨域（CORS）限制 #

浏览器有同源策略，若Angular运行端口（默认4200）与Spring的8080端口不同，会触发跨域拦截。在Spring的Controller上添加跨域注解即可解决：

@CrossOrigin(origins = "http://localhost:4200")
@RestController
public class LoginController {
    @RequestMapping(value = "/login", method = RequestMethod.POST)
    public String getLogin(@RequestBody Credential credential) {
        System.out.println("Hello moto");
        System.out.println(credential.toString());
        return "Allo";
    }
}

3. 请求路径一致性 #

原前端请求路径末尾多了斜杠（/login/），虽然Spring会自动兼容，但建议和后端@RequestMapping的/login保持一致，避免潜在路径匹配问题。

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