尝试提交表单时出现 HTTP post 请求错误

Question

我创建了一个 Web 应用程序来创建足球俱乐部并生成足球比赛它的一个功能是当用户在 GUI 上输入一个随机日期时，程序应该显示当天进行的所有比赛。为此，我在 HTML 文件中创建了一个表单，并使用 HTTP post 请求将数据发送到另一个项目中的后端（2 个不同的端口） localhost:4000-Angular 界面 localhost:8082-Java Spring 引导应用程序（后端）

这是我的日期检查部分的代码！

----HTML 文件-----

<div id="dateContainer"><form #datePost="ngForm" (ngSubmit)="onSubmit(datePost.value)" >
<input type="text" name="date" ngModel placeholder="12/12/2012">
<button type="submit">Find</button>
</form>
</div>

-----Ts文件----

import { Component, OnInit } from '@angular/core';

import{HttpClient, HttpClientModule} from '@angular/common/http';

@Component({

  selector: 'app-date',

  templateUrl: './date.component.html',

  styleUrls: ['./date.component.css']

})
export class DateComponent implements OnInit {

  onSubmit(data){

    this.http.post('http://localhost:8082/dateReq',data)

    .subscribe((result)=>{

      console.warn("result",result)

    })
  
  }
  constructor(private http:HttpClient) { }

  ngOnInit(): void {
  }

}

-----Java-----

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

@GetMapping("/dateReq")

public ArrayList<String> getDates(){

    return PremiereLeagueManager.dateCheck;

}

当我在 GUI 中输入日期并单击查找按钮时，我在控制台上收到这些错误

Access to XMLHttpRequest at 'http://localhost:8082/dateReq' 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.
:8082/dateReq:1 

Failed to load resource: net::ERR_FAILED
core.js:5967 

ERROR HttpErrorResponse
defaultErrorLogger @ core.js:5967

Answer 1

你有一个 @GetMapping 并且你正在做一个 post 我认为你需要导入 @PostMapping

Answer 2

为什么在 Java 中有 GetMapping 而在 Angular 中使用 http.post？获取请求也没有参数。尝试更改您的 ts 文件：

提交（数据）{

this.http.post('http://localhost:8082/dateReq',data)

.subscribe((result)=>{

  console.warn("result",result)

})

}

并在 java 中：

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

@PostMapping("/dateReq")

public ArrayList<String> getDates(){

    return PremiereLeagueManager.dateCheck;

}

此外，我强烈建议您使用响应式表单，因为它们更好，您可以在此处查看详细信息：https://angular.io/guide/reactive-forms

尝试提交表单时出现 HTTP post 请求错误

HTTP post request error when trying to submit a form

java

crud

httpservice

typescript

angular