Angular HTTP GET请求本地8080端口Spring Boot接口失败如何解决

• 跨域（CORS）拦截：Angular本地开发服务默认运行在http://localhost:4200，和8080端口的Spring Boot服务属于不同源，浏览器默认会拦截跨源请求。公开线上API一般提前配置了跨域放行规则，所以可以正常访问，Spring Boot默认未开启跨域配置，会直接拒绝未放行的跨域请求。
• 请求未实际发出：现有代码仅定义了postdetail()请求方法，既没有在ngOnInit生命周期钩子中调用，也没有绑定到模板交互事件，逻辑上根本没有触发GET请求。
• 后端服务异常：Spring Boot未正常启动在8080端口、/users接口路径配置错误、接口被Spring Security或自定义拦截器拦截、本地防火墙阻止了端口访问，都会导致请求失败。
• 硬编码绝对路径隐患：直接写死http://localhost:8080的请求地址，不仅必然触发跨域校验，后续项目部署上线后还会出现地址不匹配的问题。

方案1：配置Angular开发代理（开发环境首选，无需修改后端代码） #

1. 在Angular项目src目录下新建proxy.conf.json文件，写入以下配置：

{
  "/api": {
    "target": "http://localhost:8080",
    "secure": false,
    "pathRewrite": {
      "^/api": ""
    }
  }
}

2. 打开项目根目录的angular.json，找到projects -> [你的项目名称] -> architect -> serve -> options节点，新增代理配置项：

"proxyConfig": "src/proxy.conf.json"

3. 修改组件内的请求地址，替换硬编码的绝对路径为代理前缀路径：

// 原请求代码
// .get('http://localhost:8080/users')
// 修改为
.get('/api/users')

4. 重启Angular开发服务ng serve，后续所有/api开头的请求会被自动转发到本地8080端口，不会触发浏览器跨域拦截。

方案2：后端配置CORS跨域放行（适合前后端分离部署场景） #

任选一种方式配置即可：

• 局部配置：在需要跨域访问的Controller类或接口方法上添加@CrossOrigin注解

// 标注在Controller类上表示该类所有接口允许指定来源跨域
@CrossOrigin(origins = "http://localhost:4200")
@RestController
@RequestMapping("/users")
public class UserController {
    // 业务接口方法
}

• 全局配置：新建CORS配置类统一放行跨域请求

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

注意：如果项目引入了Spring Security，需要同步在Security过滤链配置中开启CORS支持，否则上述跨域配置不会生效。

补全请求触发逻辑 #

如果需要页面加载完成就拉取数据，直接在ngOnInit中调用请求方法：

ngOnInit(): void {
  this.postdetail();
}

如果需要通过用户交互触发请求，在模板中绑定对应事件即可：

<button (click)="postdetail()">获取用户列表</button>
<pre>{{ data | json }}</pre>

后端服务校验 #

先直接在浏览器地址栏访问http://localhost:8080/users，确认接口可以正常返回数据，依次排查以下问题：

• 确认Spring Boot服务正常启动，8080端口未被其他进程占用
• 确认/users接口路径拼写正确，没有配置上下文路径前缀
• 如果接口返回401/403状态码，检查Spring Security、自定义拦截器规则，将对应接口加入放行列表

内容的提问来源于stack exchange，提问作者Vikneysh Raj G G A