Javascript Axios Post请求不起作用

我是react和Axios新手，我想在react中使用Axios向API发送一组数据，这是API中的数据格式：

{
    "company_name": "Karno",
    "title": "Devops Engineer",
    "internal_code": 856789,
    "department": 1,
    "location": 2,
    "tags": [10, 11],
    "benefits": "At Snapp, we like spending ...",
    "description": "About Snapp..." 
    "requirements": "Mandatory QualificationsStrong Linux administration skills..."
}

这是我的代码，当按下按钮时，它将发送这些数据这些数据保存在道具中，并显示在这个确认表单页面上到API，但是我的post请求似乎不起作用，我没有收到服务器的任何响应，在我的服务器日志中也没有看到任何post请求

const headers = {
  'content-type': 'application/json',
  'Authorization': 'Token bba27954e46823f1f82ff2c89d19f5802e46fd3f'
}

export class Confirmation extends Component {
  state = {
    title: '',
    company_name: '',
    internal_code:'',
    department:'',
    location:'',
    tags:[],
    benefits:'',
    description:'',
    requirements:''
  }

  handleSubmit = event => {
    event.preventDefault();

    const job = {
      title:this.values.Title,
      company_name:this.values.Company,
      internal_code:this.values.InternalCode,
      department:this.values.Department.id,
      location:this.values.Location.id,
      tags:this.values.Tags.map(tag=>tag.id).join(', '),
      benefits:this.values.Benefits,
      description:this.values.Detailss,
      requirements:this.values.requirements
    }
    axios.post('/api/jobs/job-creation/',{headers:headers}, job)
    .then(res=> {
      console.log(res)
      console.log(res.data)
    })
  }

continue = e => {
    e.preventDefault();
    this.props.nextStep();
  };

  back = e => {
    e.preventDefault();
    this.props.prevStep();
  };

render () {
    const {
      values: {
        Title, Benefits,
        Company, InternalCode, Detailss, Department,Tags, Salary,requirements,Location,newTags
      }
    } = this.props
 return (
    <form  onSubmit={this.handleSubmit}>
      <div className='container'>
 <div className='content'>
          <Container>
            <Row>
              <Col xs='6' sm='4' className='TextContent'>
                <Row className='TextInside'> Salary: {Salary} </Row>
                <Row>  Location: {Location.label}</Row>
                <Row>  New Tags: {newTags.join(', ')} </Row> 
              </Col>
              <Col xs='6' sm='4' className='TextContent'>
                <Row>   Company: {Company}</Row>
              // info in the {} are shown on page and need to be sent to api
                <Row>   Internal Code: {InternalCode}</Row> 
                <Row>   Pre Tags: {Tags.map(tag=>tag.label).join(", ")}</Row>
                <Row>   Department: {Department.label}</Row>  
              </Col>
              <Col xs='6' sm='4' className='TextContent'>
                <Row>   Job Title: {Title}</Row>
                <Row>   Benefits: {Benefits}</Row>
              </Col>
            </Row>
          </Container>
        </div>
       <div className='Detailss' style={{width:'1000px'}}>
         {Detailss}
       </div> 
<div className='req'>
       {requirements}
      </div>


      //buttons
      <div className='buttons-container' style={{position:'relative',bottom:'20px'}}>
       <button onClick={this.back} className='previous'>قبلی</button> 
       <button type='submit' onClick={this.continue} className='next'>ادامه</button>
     </div>

     </Container>
     </Container>
    </div>
    </form>

---

我做错了什么？

在表单的onSubmit处理程序被触发之前，您的onClick listener on submit按钮会触发重定向。删除onClick侦听器并将其移动。继续。然后回调post请求

---

另外，从continue方法和e.preventDefault中删除“e”参数，并将作业对象中的this.values更改为this.props.values。

浏览器的“网络”选项卡中是否出现错误？@HMR no，我有几个get请求可以正常工作，还有一个post请求也可以正常工作，但这个post请求甚至没有出现在logsCheck的网络选项卡和浏览器中的控制台日志中，它可能被CORS或其他安全策略阻止。@KotoFunm CORS不太可能，因为在问题中OP正在发布到/api/jobs/job creation/是否检查handleSubmit是否至少在axios函数调用之前运行？