Send Data from Angular to Springboot over POST

Question

I am trying to send one json from my frontend angular project to the backend which is springboot.

It is the first time I am using these 2 technologies so I lack in experience.

I am not quite sure if my http post method in Angular is wrong or if my backend isn't listening to the data which are supposed to come.

I will attach both code parts so that you can help me. Thank you in advance!

Here is a picture of the chrome console: Http Errorcode 404 http error image

Backend:

@RestController
@RequestMapping
@CrossOrigin(origins = "http://localhost:4200")
public class RequestController {

    private RolesRequestRepository rolesRequestRepository;

    @PostMapping("/sendrolesrequest")
    void addRequest(@RequestBody RolesRequest rolesRequest) {
        rolesRequestRepository.save(rolesRequest);
    }

    @GetMapping("/sendrolesrequest")
    public List<RolesRequest> getRequests() {
        return (List<RolesRequest>) rolesRequestRepository.findAll();
    }

}


@Entity
public class RolesRequest {
    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    private long id;
    private String requester = "";
    private String recipient = "";

    public RolesRequest(String recipient, String requester) {
        this.recipient = recipient;
        this.requester = requester;
    }

    public RolesRequest(){

    }

    public long getId() {
        return id;
    }

    public void setId(long id) {
        this.id = id;
    }

    public String getRequester() {
        return requester;
    }

    public void setRequester(String requester) {
        this.requester = requester;
    }

    public String getRecipient() {
        return recipient;
    }

    public void setRecipient(String recipient) {
        this.recipient = recipient;
    }
}

Here is the angular frontend part:

@Injectable()
export class RequestService {
  sendRolesRequestUrl = 'sendrolesrequest';  // URL to web api
  private handleError: HandleError;

  constructor(
    private http: HttpClient,
    httpErrorHandler: HttpErrorHandler) {
    this.handleError = httpErrorHandler.createHandleError('RequestService');
  }

  sendRolesRequest (rolesRequest: RequestModel): Observable<RequestModel> {
    //console.log("addRolesRequest try post:" + rolesRequest.print());
    return this.http.post<RequestModel>(this.sendRolesRequestUrl, rolesRequest, httpOptions)
      .pipe(
        catchError(this.handleError('sendRolesRequest', rolesRequest))
      );
  }

  testPost() {
    const headers = new Headers();
    headers.append('Content-Type', 'application/json; charset=utf-8');
    this.http.post(this.sendRolesRequestUrl, {'key1': 'value1', 'key2': 'value2'}, httpOptions)
      .subscribe(() => {}, err => console.error(err));
  }
}

export class RequestFormulaComponent implements OnInit {

  onSendRequest() {
    this.requestService
      .sendRolesRequest(this.rolesRequest)
      .subscribe();
  }
}

I would be very happy if someone helps me out here. I am struggling on this topic over a week. Is that even the way how a backend application should communicate with the webpage? If not, how can I do it otherwise?

Is the URL correct? I think it should be something like http://localhost:<port backend>/sendrolesrequest Do you have errors in your browser console or in you backend application? Did you get any HTTP error code? Can you interface with the backend via Postman, WGET, a browser GET/request? Maybe it's a good advice to add the error (if you have one) to the question. — Jasper Huzen
– Jasper Huzen, Commented Jan 23, 2020 at 22:07
Thank you for your answer. I tried this but nothing changed. My http error is 404 i added a link with a picture in the question — paokdev
– paokdev, Commented Jan 23, 2020 at 22:46

Alex Chernyshev · Accepted Answer · 2020-01-23 22:10:23Z

1

You're using JPA entity as DTO, and have no setters/getters, also there is no default constuctor, modify your RolesRequest like this:

 @Entity
    public class RolesRequest {
    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    private long id;
    private String requester = "";
    private String recipient = "";

    public RolesRequest() { }
    public RolesRequest(String recipient, String requester) {
        this.recipient = recipient;
        this.requester = requester;
    }
    public String getRequester() { return this.requester; }
    public void setRequester(String r) { this.requester = r;}
    public String getRecipient() { return this.recipient; }
    public void setRecipient(String r) { this.recipient = r;}

answered Jan 23, 2020 at 22:10

Alex Chernyshev

1,74510 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

paokdev Over a year ago

Thank you for your answer i didnt add the entity in the question because i thought that wouldnt be important enough. In fact i have implemented all the getter setter and constructors. i have just eddited my question.

Jasper Huzen · Accepted Answer · 2020-01-23 22:46:49Z

0

Are your backend and angular app running on the same port? (backend and frontend are combined in the same application)

You are calling http://localhost:4200/sendrolesrequest and I think that's a request on the Angular app itself. You get a HTTP 404 error code (NOT FOUND)

You should call the endpoint of the backend application. It's running on port 8080 for example so call http://localhost:8080/sendrolesrequest (or with other port if backend is running on another port)

Change:

sendRolesRequestUrl = 'sendrolesrequest';

to:

sendRolesRequestUrl = 'http://localhost:8080/sendrolesrequest';

answered Jan 23, 2020 at 22:46

Jasper Huzen

1,57312 silver badges26 bronze badges

3 Comments

paokdev Over a year ago

thank you for your answer. The change affected the http error to a 500. Is this better?

Jasper Huzen Over a year ago

Error 500 means "Internal Server Error". Check the log/output on you backend application if the error can be found over there. If that's the case you have communication with the backend and you "only" have to fix the issue(s) why the internal server error occurs. That's then another error than your initial question.

paokdev Over a year ago

Thanks a lot you are right ! I finally have a connecection between frontend and backend

Collectives™ on Stack Overflow

Send Data from Angular to Springboot over POST

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related