从angular8命中端点返回404

Question

这是我在angular8中的第一次练习。我正在尝试创建一个表单，该表单使用了用springboot编写的API。在尝试从angular8中使用它时，永远不会执行用spring-boot编写的api，下面是端点。

http://localhost:8080/api/startreg




@PostMapping("/startreg")
    public ResponseData<Activity> addReg(
            @RequestParam(value="firstDate") String firstDate,@RequestParam(value="secondDate") String secondDate
            ,@RequestParam(value="username") String username) {

            try {

下面是service.ts脚本

private baseUrl = 'http://localhost:8080/api/startreg';
createReg(activity: Object): Observable<Object> { 
    return this.http.post('${this.baseUrl}', activity);
  }

angular8的html文件如下所示

<form (ngSubmit)="onSubmit()">

              <div class="col-md-3 col-sm-5 col-xs-12 gutter">
                <div class="sales">
                  <h2>From:</h2>
                  <div class="btn-group">              
                   <select [(ngModel)]="activity.firstDate" class="form-control" name="firstDate"> 

当我尝试提交表单时，请从下面的浏览器控制台错误

HttpErrorResponse {headers: HttpHeaders, status: 404, statusText: "Not Found", url: "http://localhost:4202/$%7Bthis.baseUrl%7D", ok: false, …}

请告诉我哪里弄错了

Answer 1

因为this.http.post('${this.baseUrl}', activity);不会调用值为this.baseUrl的服务，所以您可以根据错误消息找到原因。传递给post的URL仍然是字符串，而不是变量。

请修改service.ts如下：

...
    return this.http.post(this.baseUrl, activity);
}

更新

另一个问题是您的服务使用请求参数，因此您必须在service.ts中传递这些HTTP的URL参数。

有效的URL应该如下所示：

http://localhost:8080/api/startreg?firstDate=XXX&secondDate=XXX&username=XXX

但是我不熟悉TypeScript，所以我不知道怎么做。也许你可以参考Angular2 - Http POST request parameters。

顺便说一句，我强烈建议您应该使用@RequestBody而不是@RequestParam来进行POST服务。