Angular POST 请求在命中 spring 引导端点时不起作用

Question

I'm new to angular, and it's creating some confusion for me, as I'm unable to figure out the cause of REST POST request failure.

I'm developing an application by using Angular as frontend and Spring as backend.

Here is my spring POST endpoint:

@PostMapping("/memes")
    public ResponseEntity<MemeEntity> memeStreamAdd(@RequestBody Meme request) {
        return ResponseEntity.ok().body(memeService.addMeme(request.getName(), request.getUrl(), request.getCaption()));
}

and MemeEntity.java

public class MemeEntity {

    @Id
    @GeneratedValue
    private Long memeId;

    @NonNull
    private String name;

    @NonNull
    private String url;

    @NonNull
    private String caption;

}

And here is the angular POST request to hit the above spring endpoint:

  public addMeme(meme) {
    return this.http.post("http://localhost:8081/memes",meme,{responseType:'text' as 'json'}); 
  }

And meme object Meme.ts

export class Meme{
    constructor(
        name:string, 
        caption:string, 
        url:string
    ){}
}

This is the form I'm using to hit the post request.

    <form>
      <fieldset>

          <div class="form-group">
              <label for="name"><span class="req">* </span> Name: <small>This will be your login user
                      name</small> </label>
              <input required type="text" [(ngModel)]="meme.name" name="name" id="name"/>
          </div>

          <div class="form-group">
              <label for="caption"><span class="req">* </span> caption: </label>
              <input class="form-control" type="text" [(ngModel)]="meme.caption" name="caption" id="txt"/>
              <div id="errFirst"></div>
          </div>
          <div class="form-group">
              <label for="url"><span class="req">* </span> Experience : </label>
              <input class="form-control" type="text" [(ngModel)]="meme.url" name="url"/>
              <div id="errLast"></div>
          </div>

      
          <div class="form-group">
              <input class="btn btn-success" type="submit" name="submit_reg" value="Meme" (click)="registerNow()">
          </div>
      </fieldset>
  </form>

When I'm clicking on submit, it's hitting the registerNow() method, but the request is failing as it's visible in the inspect element/browser developers tool.

Any help/tip would be very appreciated.

Thank you.

Answer 1

I would expect your Spring Boot application not allowing cross origin requests and that's why you would not get any data. Did you alread allow CORS? https://spring.io/guides/gs/rest-service-cors/

What is the concrete error message in the browser? Is there any log on the server and did you enable trace logging on the server?