Angular 13中GET请求URL出现object%20Object引发404错误排查

核心问题定位 #

你的请求URL出现object是因为product.service.ts里的findProductById方法拼接URL时犯了低级错误：把this.url写成了this.http。this.http是HttpClient的实例对象，在模板字符串中会被序列化为[object Object]，最终请求URL变成了[object Object]/product/xxx，自然返回404。

修复代码 #

修改product.service.ts中的findProductById方法：

findProductById(productId: number) {
  // 把${this.http}改成${this.url}，同时注意路径需和后端接口匹配
  return this.http.get<Product>(`${this.url}/products/product/${productId}`);
}

注意：这里的路径/products/product/${productId}需要和你的Spring Boot后端接口路径保持一致，如果后端接口是/product/${id}，就写${this.url}/product/${productId}。

额外优化建议 #

• 路由参数类型转换
  route.params获取到的id是字符串类型，直接传给服务可能导致后端类型不匹配，建议转成数字：

  this.productId = +data['id']; // 用+号快速转换为数字类型
  

• 避免嵌套订阅
  嵌套订阅会增加代码复杂度，建议用switchMap操作符优化：

  import { switchMap } from 'rxjs/operators';
  
  ngOnInit(): void {
    this.route.params.pipe(
      switchMap(data => {
        this.productId = +data['id'];
        return this.productService.findProductById(this.productId);
      })
    ).subscribe(data => {
      this.product = data;
      console.log(data);
    });
  }
  

• 确认列表页跳转逻辑
  确保商品列表页的跳转代码正确，比如使用router.navigate：

  // 示例：列表项点击事件处理
  goToProductDetail(id: number) {
    this.router.navigate(['/products/product', id]);
  }
  

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