通过 Axios 发送一个 post 请求是在 Spring-Boot 后端生成一个空的 RequestBody。在 Postman 中工作，但不能通过 Axios 发布请求

Posted 2023-02-26

【中文标题】通过 Axios 发送一个 post 请求是在 Spring-Boot 后端生成一个空的 RequestBody。在 Postman 中工作，但不能通过 Axios 发布请求

【英文标题】：Sending a post request through Axios is generating an empty RequestBody in Spring-Boot backend. Works in Postman but not through Axios post request

【发布时间】：2019-08-08 04:41:29

【问题描述】：

我有一个 react 前端和一个 spring 后端。我为后端提供了休息服务，该服务将 summaryerData 作为输入并返回与输出相同的内容。 我有一个接受 textarea 输入和提交按钮的表单。 通过 axios 发送发布请求时，我得到一个空对象。我已经通过邮递员测试了api，但是通过axios提交时，我收到500内部错误。

我在 RestController 中启用了 CORS。

请告诉我是什么问题 SummarizerData Pojo

@Entity(name = "user_text_data")
@Getter
@Setter
@ToString
public class SummarizerData 


    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Integer id;

    @Column
    private String paragraph;


    @Column
    private LocalDateTime creationDate;

    @Transient
    private List<Sentence> summarizedSentences;


    public SummarizerData()

    

    public SummarizerData(String paragraph)
        this.paragraph = paragraph;
        this.creationDate = LocalDateTime.now();
    

TextSummarizerController

@RepositoryRestController
@RequestMapping("/api")
public class TextSummarizerController

    @Autowired
    SummarizerDataRepository repository;

    Logger logger = Logger.getLogger(TextSummarizerController.class.getName());


    @CrossOrigin
    @RequestMapping(method = RequestMethod.POST, value = "/summarize")
    public @ResponseBody SummarizerData getSummarizerData(@RequestBody SummarizerData data )
        System.out.println("Returning Summarized Data");
        SummaryTool summaryTool = new SummaryTool();

        logger.info(data.toString());
        repository.save(data);
        data.setSummarizedSentences(summaryTool.startSummarization(data.getParagraph()));
        return data;
    

反应前端

import React,  Component  from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import Navbar from './components/Navbar';
import ParagraphEntry from './components/ParagraphEntry';
import BrowserRouter as Router, Route from 'react-router-dom';
import axios from 'axios';
class App extends Component 



  constructor(props)
    super(props);

    this.state = 
      "summarizerData" : , 
      "paragraph" : ""
     ; 
  



  onChange = (e) => 
    this.setState("paragraph" : e.target.value);
  ;

onSubmit= (e) => 
    e.preventDefault();
    var headers = 
      'Content-Type': 'application/json' 
  
    const summarizerData = 
        "paragraph" : this.state.paragraph,
        "creationDate" : "2019-03-10T00:58:23",
        "summarizedSentences" :null
    ;

    axios.post('http://localhost:8080/api/summarize',summarizerData, headers)
        .then(res => console.log(res.data))
    console.log(summarizerData);





handleClear = (e) => 
  console.log(e);
  e.target.value = "";
  this.setState("paragraph" : "");


  render() 
    return (

      <div className="App">

       <Navbar />

       <ParagraphEntry onChange = this.onChange onSubmit=this.onSubmit handleClear = this.handleClear  paragraph = this.state.paragraph/>


      </div>

    );
  


export default App;

错误日志

Returning Summarized Data
2019-03-18 00:10:19.487  INFO 8336 --- [nio-8080-exec-5] c.n.t.s.rest.TextSummarizerController    : SummarizerData(id=null, paragraph=null, creationDate=null, summarizedSentences=null)
2019-03-18 00:10:19.491  WARN 8336 --- [nio-8080-exec-5] o.h.engine.jdbc.spi.SqlExceptionHelper   : SQL Error: 1048, SQLState: 23000
2019-03-18 00:10:19.491 ERROR 8336 --- [nio-8080-exec-5] o.h.engine.jdbc.spi.SqlExceptionHelper   : Column 'creation_date' cannot be null
2019-03-18 00:10:19.495 ERROR 8336 --- [nio-8080-exec-5] o.a.c.c.C.[.[.[/].[dispatcherServlet]    : Servlet.service() for servlet [dispatcherServlet] in context with path [] threw exception [Request processing failed; nested exception is org.springframework.dao.DataIntegrityViolationException: could not execute statement; SQL [n/a]; constraint [null]; nested exception is org.hibernate.exception.ConstraintViolationException: could not execute statement] with root cause

java.sql.SQLIntegrityConstraintViolationException: Column 'creation_date' cannot be null
    at com.mysql.cj.jdbc.exceptions.SQLError.createSQLException(SQLError.java:117) ~[mysql-connector-java-8.0.15.jar:8.0.15]
    at com.mysql.cj.jdbc.exceptions.SQLError.createSQLException(SQLError.java:97) ~[mysql-connector-java-8.0.15.jar:8.0.15]
    at com.mysql.cj.jdbc.exceptions.SQLExceptionsMapping.translateException(SQLExceptionsMapping.java:122) ~[mysql-connector-java-8.0.15.jar:8.0.15]
    at com.mysql.cj.jdbc.ClientPreparedStatement.executeInternal(ClientPreparedStatement.java:970) ~[mysql-connector-java-8.0.15.jar:8.0.15]

上面的重点是 SummarizerData，所有字段都为空。

我是一个反应初学者，所以请让我知道任何错误。

谢谢

【参考方案1】：

问题是您不必要地将summarizerData 和headers 包装为对象构造函数运算符（）。您之前已经创建了对象，这应该可以解决您的问题：

axios.post('http://localhost:8080/api/summarize', summarizerData, headers)

summarizerData 所做的就是创建一个像这样的对象：

  "summarizerData": 
    "paragraph": this.state.paragraph,
    "creationDate": "2019-03-10T00:58:23",
    "summarizedSentences": null
  

不能在您的后端映射到SummarizerData。您可以使用开发者工具（Chrome、Firefox）来调查您的 HTTP 调用。它会让你例如要查看请求正文中实际发送的内容，请查看请求和响应标头及其值等。

【讨论】：

谢谢。有效。你能告诉我为什么用户在这篇文章中没有遇到同样的错误吗？ alligator.io/react/axios-react

你不知道他的后端模型实现是什么。它必须符合他在 POST 请求中发送的数据。如果有帮助，请将答案标记为已接受并 +1。最欣赏！ ;)