Angular连接REST API报404 Not Found错误如何解决？

1. 修复前端模板字符串语法错误 #

你当前employee.service.ts中GET请求的URL使用普通单引号包裹，TypeScript 模板字符串只有使用**反引号（）**包裹时才会解析${}占位符的变量值，你用单引号导致${this.apiServerUrl}`被当成普通字符串拼接，所以请求地址错误指向了前端自身的4200端口，触发404。

修复代码： #

public getEmployees(): Observable<Employee[]> {
  // 把单引号换成反引号
  return this.httpclient.get<Employee[]>(`${this.apiServerUrl}/all`);
}

2. 修复后端控制器注解 #

你当前后端EmployeeController使用@Controller注解，该注解默认返回视图路径，不能直接返回JSON格式的接口数据，需要替换为@RestController注解（该注解是@Controller + @ResponseBody的组合，会自动将返回值序列化为JSON）。

修复代码： #

// 替换@Controller为@RestController
@RestController
public class EmployeeController {
    // 原有代码保持不变
}

3. 可选：配置跨域访问 #

前端运行在http://localhost:4200，后端运行在http://localhost:8080，端口不同属于跨域请求，浏览器会默认拦截，可在后端控制器类上加跨域注解放开访问权限（生产环境请替换为你的前端正式域名）：

修复代码： #

@RestController
@CrossOrigin(origins = "*") // 新增跨域配置
public class EmployeeController {
    // 原有代码保持不变
}

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