Отправка данных из Angular в Springboot через POST

Question

Я пытаюсь отправить один json из моего внешнего интерфейса angular на сервер, который является springboot.

Я впервые использую эти 2 технологии, поэтому мне не хватает опыта.

Я не совсем уверен, что мой метод http post в Angular неправильный или мой сервер не прослушивает ожидаемые данные.

Я прикреплю обе части кода так что вы можете помочь мне. Заранее спасибо!

Вот изображение chrome консоли: 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;
    }
}

Вот часть внешнего интерфейса angular:

@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();
  }
}

Я был бы очень рад, если бы кто-то помог мне здесь. Я борюсь с этим топи c в течение недели. Это то, как бэкэнд-приложение должно взаимодействовать с веб-страницей? Если нет, то как я могу сделать это иначе?

Answer 1

Вы используете JPA-сущность в качестве DTO, и у вас нет сеттеров / геттеров, также нет конструктора по умолчанию, измените ваш RolesRequest следующим образом:

 @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;}

Answer 2

Бэкэнд и приложение angular работают на одном и том же порту? (backend и frontend объединены в одном приложении)

Вы звоните http://localhost:4200/sendrolesrequest, и я думаю, что это запрос самого приложения Angular. Вы получаете код ошибки HTTP 404 (НЕ НАЙДЕН)

Вы должны вызвать конечную точку серверного приложения. Например, он работает на порту 8080, поэтому позвоните http://localhost:8080/sendrolesrequest (или с другим портом, если сервер работает на другом порту)

Измените:

sendRolesRequestUrl = 'sendrolesrequest';

на:

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