Angular + Spring Boot 删除功能异常求助：405错误导致无法删除内容

你遇到的405（Method Not Allowed）错误，核心是前后端请求路径不匹配，再加上前端删除逻辑的几个小bug导致的，咱们一步步拆解修复：

1. 先解决最关键的路径不匹配问题 #

你的Spring Boot后端控制器@RequestMapping标注的是"quantidades"，但前端发起的删除请求路径是http://localhost:8080/produtos-inseridos/，两者完全对不上，这是405错误的主要原因。

方案一：调整后端路径匹配前端 #

把控制器的请求路径改成和前端一致的：

@RestController 
@RequestMapping("produtos-inseridos") // 改成前端请求的路径
@Log4j2 
@RequiredArgsConstructor 
public class QuantidadeController { 
    // 其他代码保持不变
}

方案二：调整前端路径匹配后端 #

修改你的ProdutosInseridosService中的删除方法，请求路径对齐后端的quantidades：

deleteProduto(id: number): Observable<void> {
  return this.http.delete<void>(`http://localhost:8080/quantidades/${id}`);
}

2. 修复前端删除逻辑的bug #

你的前端代码还有几处逻辑错误，导致请求参数异常：

2.1 模板里的删除按钮传参错误 #

当前点击删除按钮时传的是整个produtos数组，应该传循环中的单个produto：

<button type="button" class="btn btn-danger btn-sm ml-1" (click)="deleteProduto(produto)" > 
  Deletar 
</button>

2.2 修正组件的deleteProduto方法 #

现在需要接收单个产品对象，而不是数组：

deleteProduto(produto: ProdutosInseridos) { // 参数改为单个产品对象
  this.produtoSelecionado = produto; // 直接存储单个对象，后续逻辑更简洁
  this.deleteModalRef = this.modalService.show(this.deleteModal, { class: 'modal-sm' });
}

2.3 重构confirmDelete方法的逻辑 #

当前你在确认删除时的数组过滤完全没必要，直接拿选中产品的ID传给服务即可：

confirmDelete() { // 不需要额外传参
  const produtoId = this.produtoSelecionado.id;
  this.produtosInseridosService
    .deleteProduto(produtoId) // 直接传ID
    .subscribe(
      () => {
        alert('Produto deletado com sucesso');
        this.deleteModalRef?.hide();
        // 删除后刷新列表，确保页面数据同步
        this.produtosInseridosService.getAll().subscribe(dados => this.produtos = dados);
      },
      (error) => {
        alert(`Não foi possível deletar o produto. Tente mais tarde: ${error.message}`);
        this.deleteModalRef?.hide();
      }
    );
  this.message = 'Confirmed!';
}

2.4 确保服务层的删除方法正确 #

你的ProdutosInseridosService里的deleteProduto必须把ID拼接到URL末尾：

@Injectable({
  providedIn: 'root'
})
export class ProdutosInseridosService {
  private apiUrl = 'http://localhost:8080/produtos-inseridos'; // 和后端路径保持一致

  constructor(private http: HttpClient) { }

  // 其他方法...

  deleteProduto(id: number): Observable<void> {
    return this.http.delete<void>(`${this.apiUrl}/${id}`); // 必须拼接ID
  }
}

3. 额外检查项 #

• 跨域问题：如果前后端端口不同（比如前端4200，后端8080），需要在后端控制器添加@CrossOrigin(origins = "http://localhost:4200")注解，允许跨域请求。
• 后端删除方法验证：你的后端@DeleteMapping(path = "/{id}")写法是正确的，只要路径匹配，就能正常接收ID参数执行删除。

按照上面的步骤修改后，删除功能应该就能正常工作，405错误也会消失。

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