我已经创建了一个web应用程序来创建足球俱乐部和生成足球比赛它的一个功能是当用户在gui上输入一个随机日期时,程序应该显示当天进行的所有比赛。为此,我在html文件中创建了一个表单,并使用httppost请求将数据发送到另一个项目中的我的后端(两个不同的端口)localhost:4000-angular gui 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中输入一个日期并单击find按钮时,我在控制台上得到了这些错误
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
2条答案
按热度按时间c9x0cxw01#
为什么在java中有getmapping,而在angular中使用http.post?get请求也没有参数。尝试更改ts文件:
提交(数据){
}
在java中:
另外,我强烈建议您使用React式表单,因为它们更好,您可以在这里看到详细信息:https://angular.io/guide/reactive-forms
pgpifvop2#
你有一个
@GetMapping
当你在写一篇文章的时候,我想你需要导入@PostMapping