Angular调用Spring Boot接口报错：Http failure response 0 Unknown Error

核心原因分析 #

错误码0 Unknown Error通常是浏览器的**跨域拦截（CORS）**导致的——尽管后端返回了200状态的正确响应，但浏览器因为跨域策略限制，没有把响应数据传给Angular应用，导致前端拿不到数据。此外也需要检查配置匹配、类型定义等问题。

排查步骤及解决方法 #

1. 解决Spring Boot后端跨域问题

Angular默认运行在http://localhost:4200，而Spring Boot在8082端口，属于不同域，必须配置CORS允许前端访问：

• 局部配置：在你的EmployeeController类上添加注解：

  @CrossOrigin(origins = "http://localhost:4200")
  @RestController
  @RequestMapping("/employee")
  public class EmployeeController {
      // 你的接口方法
  }
  

• 全局配置（推荐，无需每个控制器加注解）：创建CORS配置类：

  @Configuration
  public class GlobalCorsConfig implements WebMvcConfigurer {
      @Override
      public void addCorsMappings(CorsRegistry registry) {
          registry.addMapping("/**")
                  .allowedOrigins("http://localhost:4200")
                  .allowedMethods("GET", "POST", "PUT", "DELETE")
                  .allowedHeaders("*")
                  .allowCredentials(true);
      }
  }
  

2. 验证Angular环境变量配置

检查environment.ts中的apiBaseUrl是否正确：

export const environment = {
  production: false,
  apiBaseUrl: 'http://localhost:8082' // 注意不要加末尾斜杠，否则拼接后会出现//employee/all
};

可以在employee.service.ts的getEmployees方法中临时打印请求URL，确认地址正确：

public getEmployees(): Observable<Employee[]> {
  const url = `${this.apiServerUrl}/employee/all`;
  console.log('请求URL:', url); // 检查控制台输出的URL是否正确
  return this.http.get<Employee[]>(url);
}

3. 确保Employee类型定义与后端字段完全匹配

前端的Employee接口必须和后端返回的JSON字段大小写一致、字段完全对应，否则Angular无法解析数据：

export interface Employee {
  id: number;
  name: string;
  email: string;
  jobTitle: string;
  phone: string;
  imageUrl: string;
  employeeCode: string;
}

4. 浏览器开发者工具调试

打开浏览器F12的Network标签：

• 找到/employee/all的请求，查看URL是否正确
• 切换到Response标签，查看是否能看到后端返回的JSON数据
• 如果看到CORS相关错误提示，说明跨域配置未生效，重新检查Spring Boot的CORS配置

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