Angular：Http delete在我的 rest api full stack 项目中不起作用

Question

我正在用spring做一个rest API来做crud操作。在我的angular应用程序中，删除HTTP客户端不起作用，当我单击删除按钮时，选定的id不会被删除。我知道我的服务器正在运行，并且控制器代码是正确的。

这是员工列表.组件. ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Employee } from '../employee' ;
import { EmployeeService } from '../employee.service';
@Component({
  selector: 'app-employee-list',
  templateUrl: './employee-list.component.html',
  styleUrls: ['./employee-list.component.css']
})

export class EmployeeListComponent implements OnInit {


  employees!: Employee[]; 
 
  constructor(private employeeService : EmployeeService ,
    private router : Router) { }

  ngOnInit(): void {

      this.fetchEmployees();
  }
  private fetchEmployees()
  {
    
    this.employeeService.getEmployeesList().subscribe(data => this.employees = data );
  }

  updateEmployee(id : number)
  {
    this.router.navigate(['update-employee' , id ]) ;
  }
  deleteEmployee(id : number)
  {
    this.employeeService.deleteEmployee(id).subscribe(data => {
      
      this.fetchEmployees() ;
    })
  }

}

这是服务页面- employee.service.ts

import { Injectable } from '@angular/core';
import { HttpClient} from '@angular/common/http' ;
import { Observable } from 'rxjs';
import { Employee } from './employee';

/** Injectable - means it will be used to provide services  */
@Injectable({
  providedIn: 'root'
})
export class EmployeeService {

   private baseUrl = "http://localhost:8080/api/v1/employees" ;


   constructor(private httpClient: HttpClient) { }

   getEmployeesList() : Observable<Employee[]>
   {
     return this.httpClient.get<Employee[]>(`${this.baseUrl}`) ; 
     
   }

   createEmployee(employee : Employee) : Observable<Object>{
     return this.httpClient.post(`${this.baseUrl}` , employee) ;
   } 

   
  getEmployeeById(id: number): Observable<Employee>{
    return this.httpClient.get<Employee>(`${this.baseUrl}/${id}`);
  }
   updateEmployee(id: number, employee: Employee): Observable<Object>{
    return this.httpClient.put(`${this.baseUrl}/${id}`, employee);
  }

  deleteEmployee(id:number ) : Observable<Object>{
    return this.httpClient.delete(`${this.baseUrl}/${id}` ) ;
  
}}

下面是按钮如何绑定到employee-list.component.html中的deleteClae（）

  <button (click) = "deleteEmployee(employee.id)" class = "btn btn-danger" style="margin-left: 10px"> Delete</button>

错误是

CORS 策略已阻止从源“http://localhost:4200”在“http://localhost:8080/api/v1/employees/1”处访问 XMLHttpRequest：对预检请求的响应未通过访问控制检查：请求的资源上不存在“访问控制-允许-源”标头。

区域.js：2863 删除 http://localhost:8080/api/v1/employees/1 网：：ERR_FAILED

但我已经添加了跨原产地工程罚款获取，发布和放置请求。请帮助。

这是员工控制者

package net.javaguides.springboot.controller;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import net.javaguides.springboot.repository.EmployeeRepository ;
import net.javaguides.springboot.exception.ResourceNotFoundException;
import net.javaguides.springboot.model.Employee ;

@CrossOrigin(origins = "http://localhost:4200") 
@RestController
@RequestMapping("/api/v1/")
public class EmployeeController {
    
    
    @Autowired
    private EmployeeRepository  employeeRepository ;
    
    //get all employees
    @GetMapping("/employees")
    public List<Employee> getAllEmployees()
    {
        return employeeRepository.findAll() ;
    }
    
    //create employee api 
    @PostMapping("/employees")
    public Employee createEmployee(@RequestBody Employee employee)
    {
        return employeeRepository.save(employee);
    }
    
    // get employee by id rest api
    @GetMapping("/employees/{id}")
    public ResponseEntity<Employee> getEmployeeById(@PathVariable Long id) 
    {
        
        Employee employee = employeeRepository
                            .findById(id)
                            .orElseThrow(()-> new ResourceNotFoundException("Employee not exist with id : " + id));
        
        return ResponseEntity.ok(employee) ;
    }
    
    //update employee rest api
    @PutMapping("/employees/{id}")
    public ResponseEntity<Employee> updateEmployee(@PathVariable Long id ,@RequestBody Employee empdetails)
    {
        Employee employee = employeeRepository
                .findById(id)
                .orElseThrow(()-> new ResourceNotFoundException("Employee not exist with id : " + id));
    employee.setFirstName(empdetails.getFirstName());
    employee.setLastName(empdetails.getLastName());
    employee.setEmailId(empdetails.getEmailId());
    
    Employee updatedEmployee =employeeRepository.save(employee);
    return ResponseEntity.ok(updatedEmployee) ;
    }
    
    //delete employee rest api
    @DeleteMapping("/employees/{id")
    public ResponseEntity<Map<String, Boolean>> deleteEmployee(@PathVariable Long id ,@RequestBody Employee empdetails)
    {
        Employee employee = employeeRepository
                .findById(id)
                .orElseThrow(()-> new ResourceNotFoundException("Employee not exist with id : " + id));
        
        employeeRepository.delete(employee);
        Map<String, Boolean> response = new HashMap<>();
        response.put("deleted", Boolean.TRUE);
        return ResponseEntity.ok(response);
    }

}

谢谢你的帮助。从昨天开始，我就被困在这部分了。

Answer 1

添加带有配置文件的新包，解决了跨原点错误

package net.javaguides.springboot.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

@Configuration
public class Myconfiguration {

    @SuppressWarnings("deprecation")
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurerAdapter() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                .allowedMethods("GET" ,"POST" , "UPDATE" ,"PUT", "DELETE")
                .allowedOrigins("*")
                .allowedHeaders("*");
            }
        };
    }
}

此外，我还从控制器中删除了@Request estBody员工emp细节。

谢谢大家。它的工作原理。

Answer 2

问题是，您的Rest API(Java)期望一个请求体，而您的客户机(Angular Code)没有发送。

换一个

1. 要么从控制器签名中删除@Request estBody e emp细节，如下所示。

//delete employee rest api
@DeleteMapping("/employees/{id")
public ResponseEntity<Map<String, Boolean>> deleteEmployee(@PathVariable Long id)

deleteEmployee(id:number, employee : Employee) : Observable<Object> {
    return this.httpClient.delete(`${this.baseUrl}/${id}`, employee);
}