Angular前端调用Java后端无响应且无报错问题排查求助

我正在开发对接Java后端REST API的Angular项目，基础功能已完成。新增接口调用时，请求无法到达后端控制器，前端无报错、后端无响应。尝试改为GET请求、调整参数传递方式、创建测试控制器均无效，仅原有接口可正常使用。

Angular服务代码 #

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/json'
  })
};

@Injectable({
  providedIn: 'root'
})

export class ProductService {
url = "http://localhost:8080/products/";

  constructor(private http: HttpClient) { }

  extendDateWithMonths(month : number, id:number | undefined): Observable<Response> {
    console.log("service reached");
    console.log("month: " + month);
    console.log("id: " + id);
    const specificUrl = this.url + "extenddate/"+ `${month}` +"/"+ `${id}`;
    console.log("url: " + specificUrl);
    return this.http.post<any>(specificUrl, month, httpOptions);
   
  }
}

前端控制台输出 #

• service reached
• month: 3
• id: 1
• url: http://localhost:8080/products/extenddate/3/1

Java后端控制器代码（运行在localhost:8080） #

@RestController
@RequestMapping("/products")
@CrossOrigin(exposedHeaders = "http://localhost:4200")
public class ProductController {

    @Autowired
    ProductService productService;

    @PostMapping("/extenddate/{month}/{id}")
    public ResponseEntity<?> extenddate(@PathVariable int month, @PathVariable long id){
        System.out.println("extenddate reached");
        productService.extendProductsFromBon(month, id);
        return ResponseEntity.ok(new MessageResponse("date extended successfully!"));
    }
}

核心问题：CORS配置错误 #

你在后端@CrossOrigin注解里误用了exposedHeaders参数——这个参数是用来设置允许前端读取的响应头，而非允许的请求源。正确指定跨域源的参数是origins。

因为CORS配置错误，浏览器会拦截跨域请求的预检（OPTIONS）请求，导致实际的POST请求根本没发送到后端。这就是前端控制台无报错（部分浏览器不会主动弹出跨域错误，需查看Network面板）、后端无响应的原因。

次要问题：POST请求携带多余请求体 #

后端接口已经通过路径参数获取month，但前端POST请求还把month作为请求体发送，虽不会直接导致请求失败，但不符合接口设计规范，可能引发潜在问题。

解决方案 #

1. 修正CORS配置
   将后端的@CrossOrigin注解修改为：

   @CrossOrigin(origins = "http://localhost:4200")
   

   如果需要暴露特定响应头，可补充exposedHeaders参数，例如：

   @CrossOrigin(origins = "http://localhost:4200", exposedHeaders = "Authorization")
   

2. 调整前端POST请求
   去掉不必要的请求体，将请求体设为null：

   return this.http.post<any>(specificUrl, null, httpOptions);
   

3. 验证请求状态
   打开浏览器开发者工具的Network面板，查看该请求状态：修正CORS后，OPTIONS请求应返回200，后续POST请求能正常发送并得到响应。

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