reactjs - 如何通过 react.js 发出 POST 请求？

Question

我正在尝试通过 react 进行 POST 请求调用，但出现错误。如果有任何机构知道帮助我，请帮助我我必须更改的地方。

错误是:{时间戳:1510396949738，状态:415，错误:“不支持的媒体异常:”org.springframework.web.HttpMediaTypeNotSupportedException”，消息:“内容类型'multipart/form-data;boundary=----Web…daryTY6125I1exH8Ry7f ;charset=UTF-8' 不支持", ... ...}

这是我的 react 代码:

import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';
import TextField from 'material-ui/TextField';
const style = {
  margin: 15,
marginLeft: 600
};
export default class  Register extends React.Component {
  constructor(props) {
    super(props);
    this.onSubmit=this.handleSubmit.bind(this);
}
handleSubmit(e) {
    e.preventDefault();
    var self = this;


    var data = new FormData();
    const payload = {
    id: self.refs.id.getValue(),
    studentName: self.refs.sname.getValue(),
    age: self.refs.age.getValue(),
    emailId: self.refs.emailId.getValue()
};
data.append("myjsonkey", JSON.stringify(payload));

fetch('http://localhost:8083/students/', {
    method: 'POST',
    headers: {
    'Accept': 'application/json'
  },
    body: data
  })
    .then(function(response) {
        return response.json()
      }).then(function(body) {
        console.log(body);
      });
  }

render() {
    return (
      <form onSubmit={this.onSubmit}>
      <div style={style}>
      <TextField ref='id'
      hintText="Enter Student id"
      floatingLabelText="id"
      />
      <br/>
      <TextField ref='sname'
      hintText="Enter your Last Name"
      floatingLabelText="StudentName"
      />
      <br/>
      <TextField ref='age'
      hintText="Enter your Age"
      floatingLabelText="age"
      />
      <br/>

      <TextField ref='emailId'
      hintText="Enter your Email"
      floatingLabelText="emailId"
      />
      <br/>
      <br/>
      <input type="submit" />


      </div>
          </form>


    );
  }


}

Answer 1

body缺少 fetch#post要求。
body应该是 FormData 的实例在你的情况下。或者可以是其他类型的实例，如 ArrayBuffer , Blob/File .. 等等。

var data = new FormData();
const payload = {
    id: self.refs.id,
    studentName: self.refs.sname,
    age: self.refs.age,
    emailId: self.refs.emailId

};
data.append("myjsonkey", JSON.stringify(payload));

fetch('http://localhost:8083/students/', {
    method: 'POST',
    body: data
})

更多你 Fetch .