获取 CORS 策略错误以删除 Spring 中的条目

Question

我的 Spring 应用程序中有以下控制器文件：

@RestController
@CrossOrigin(origins = "*", allowedHeaders="*")
@RequestMapping("/mxkLicenseGenerator")
public class MXKLicenseController {

    @Autowired
    MXKLicenseDao mxkLicenseDao;
    
    @DeleteMapping("deleteMxkLicense/{id}")
    public void deleteMxkLicense(@PathVariable("id") long id,MXKLicense mxkLicense) {
        mxkLicense.setId(id);
        mxkLicenseDao.deleteMXKLicense(mxkLicense);
    }

道：

@Service
public class MXKLicenseDao {

    @Autowired
    MXKLicenseRepository mxkLicenseRepository;
    
    /**
     * delete a license
     */
    
    public void deleteMXKLicense(MXKLicense mxkLic) {
        mxkLicenseRepository.delete(mxkLic);
    }
}

HTML：

<td mat-cell *matCellDef="let element;">
                   <button type="button" style="margin-left:2px" (click)="deleteLicense(element.id)">Delete</button>
                   <button type="button" style="margin-left:2px" (click)="update(element)">Update</button>
                   <button type="button" style="margin-left:2px" (click)="copyToClipboard(licenseKey)" class='btn btn-primary'>Copy License Key</button>
                 </td>

组件.TS：

  deleteLicense(id: number) {
    this.generateLicenseService.deleteLicense(id)
      .subscribe(
        data => {
          console.log(data);
          this.generateLicenseService.getMxkLicenses().subscribe(data =>{
            this.mxkLicenses =data
            })
        },
        error => console.log(error));
  }

SERVICE.TS：

private url: string = "http://localhost:8080";

deleteLicense(id: number): Observable<any> {
    let headers = new HttpHeaders({
      'Content-Type': 'application/xml',
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
      'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization'
    })
    
    let options = {headers:headers, observer: 'response'};
    return this.http.delete(`${this.url}/deleteMxkLicense/${id}`,options);
  }

每当我尝试删除许可证时，都会收到以下错误：

Access to XMLHttpRequest at 'http://localhost:8080/deleteMxkLicense/1' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
generatelicense.component.ts:433 HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: "http://localhost:8080/deleteMxkLicense/1", ok: false, …}
zone-evergreen.js:2952 DELETE http://localhost:8080/deleteMxkLicense/1 net::ERR_FAILED
scheduleTask @ zone-evergreen.js:2952
scheduleTask @ zone-evergreen.js:378
onScheduleTask @ zone-evergreen.js:272
scheduleTask @ zone-evergreen.js:372
scheduleTask @ zone-evergreen.js:211
scheduleMacroTask @ zone-evergreen.js:234
scheduleMacroTaskWithCurrentZone @ zone-evergreen.js:1107
(anonymous) @ zone-evergreen.js:2985
proto.<computed> @ zone-evergreen.js:1428
(anonymous) @ http.js:2581
_trySubscribe @ Observable.js:42
subscribe @ Observable.js:28
(anonymous) @ subscribeTo.js:20
subscribeToResult @ subscribeToResult.js:7
_innerSub @ mergeMap.js:59
_tryNext @ mergeMap.js:53
_next @ mergeMap.js:36
next @ Subscriber.js:49
(anonymous) @ scalar.js:4
_trySubscribe @ Observable.js:42
subscribe @ Observable.js:28
call @ mergeMap.js:21
subscribe @ Observable.js:23
call @ filter.js:13
subscribe @ Observable.js:23
call @ map.js:16
subscribe @ Observable.js:23
deleteLicense @ generatelicense.component.ts:426
eval @ mxkLicensesListDialog.html:27
handleEvent @ core.js:43993
callWithDebugContext @ core.js:45632
debugHandleEvent @ core.js:45247
dispatchEvent @ core.js:29804
(anonymous) @ core.js:42925
(anonymous) @ platform-browser.js:1789
invokeTask @ zone-evergreen.js:391
onInvokeTask @ core.js:39680
invokeTask @ zone-evergreen.js:390
runTask @ zone-evergreen.js:168
invokeTask @ zone-evergreen.js:465
invokeTask @ zone-evergreen.js:1603
globalZoneAwareCallback @ zone-evergreen.js:1629
Show 12 more frames

谁能帮我解决这个问题？我究竟做错了什么？我已尝试模拟此链接中显示的操作：https://www.javatpoint.com/angular-spring-crud-example 我也必须对某些值进行更新，但甚至无法先进行删除

编辑 更改后添加错误消息：

更改后收到以下错误消息： 更改后出现以下错误：已解决 [org.springframework.web.method.annotation.MethodArgumentTypeMismatchException: 无法将类型“java.lang.String”的值转换为所需类型“long”； id 是@Id @NotNull，@GeneratedValue 是后端的自动类型

Answer 1

最终的endpoint url是通用RequestMapping+DeleteMapping的具体URI，所以：

你在 Angular 中设置了错误的 url，你必须请求这个：

http://localhost:8080/mxkLicenseGenerator/deleteMxkLicense/{id}

还将@DeleteMapping("deleteMxkLicense/{id}") 更改为@DeleteMapping("/deleteMxkLicense/{id}")（添加“/”）。