通过 POST 从 Angular 向 Springboot 发送数据

Posted 2023-02-16

【中文标题】通过 POST 从 Angular 向 Springboot 发送数据

【英文标题】：Send Data from Angular to Springboot over POST

【发布时间】：2020-01-23 21:54:13

【问题描述】：

我正在尝试将一个 json 从我的前端 angular 项目发送到后端，即 springboot。

这是我第一次使用这两种技术，所以我缺乏经验。

我不太确定我在 Angular 中的 http post 方法是否错误，或者我的后端是否没有收听应该到来的数据。

我将附上这两个代码部分，以便您可以帮助我。提前谢谢！

这是 chrome 控制台的图片： Http 错误代码 404 http error image

后端：

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

这是前端的角度部分：

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

如果有人在这里帮助我，我会非常高兴。我在这个话题上挣扎了一个多星期。 这甚至是后端应用程序与网页通信的方式吗？如果没有，我该怎么做？

【问题讨论】：

网址是否正确？我认为它应该类似于http://localhost:<port backend>/sendrolesrequest 您的浏览器控制台或后端应用程序中是否有错误？您收到任何 HTTP 错误代码吗？您可以通过 Postman、WGET、浏览器 GET/request 与后端交互吗？也许将错误（如果有）添加到问题中是一个很好的建议。

感谢您的回答。我试过了，但没有任何改变。我的 http 错误是 404 我在问题中添加了带有图片的链接

【参考方案1】：

您使用 JPA 实体作为 DTO，并且没有 setter/getter，也没有默认构造函数，请像这样修改您的 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;

【讨论】：

感谢您的回答我没有在问题中添加实体，因为我认为这不够重要。事实上，我已经实现了所有的 getter setter 和构造函数。我刚刚编辑了我的问题。

【参考方案2】：

您的后端和 Angular 应用程序是否在同一个端口上运行？ （后端和前端组合在同一个应用程序中）

您正在调用http://localhost:4200/sendrolesrequest，我认为这是对 Angular 应用程序本身的请求。您收到 HTTP 404 错误代码（未找到）

您应该调用后端应用程序的端点。例如，它在端口 8080 上运行，因此请调用 http://localhost:8080/sendrolesrequest（如果后端在另一个端口上运行，则使用其他端口）

变化：

sendRolesRequestUrl = 'sendrolesrequest';

到：

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

【讨论】：

感谢您的回答。更改将 http 错误影响到 500。这样更好吗？

错误 500 表示“内部服务器错误”。如果可以在那里找到错误，请检查后端应用程序的日志/输出。如果是这种情况，您与后端进行了通信，并且您“仅”必须解决导致内部服务器错误发生的问题。那是您最初的问题之外的另一个错误。

非常感谢你是对的！我终于在前端和后端之间建立了联系