我如何查看为什么 Axios POST 请求没有将有效负载数据发送到 Heroku 后端？

Question

目标：前端 react 应用可以将数据作为 POST 请求发送到 Heroku 后端。

框架：使用 Axios 进行反应

我一直在尝试在 Axios 发布请求功能上设置断点，但它似乎不起作用。我已经用.then 设置了一个承诺声明，但是没有任何响应被发送回控制台。

下面是提交时正在运行的 React 组件和 Axios POST。

我们将不胜感激任何有关此事的帮助。

我已经测试了 POSTMAN 的 POST 请求，并且数据的状态为 200 并且确实已发送。

另外，我更新了 promise 和 try-catch。 Promise 被注释掉了，因为我无法让它使用当前的语法。如果您觉得最好使用，请查看代码并了解语法问题的原因。

import React from 'react';
 import {useState} from 'react';
 import Axios from 'axios'
 //import { response } from 'express';


 const QuoteForm = () => {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [question, setQuestion] = useState("");



  /* This is the promise version however it has sytax issues : 
  the funtion containing the promise doesn't properly close so return expects } instead has ) 



   const custData =  { name:name , 
    email:email , 
    question:question} ;



   const submitQuestion =  new Promise ((resolve, reject)=>
  
    resolve(Axios.post('https://hookahsite-backend.herokuapp.com  || https://localhost:8000 ' , custData)
    .then(()=> {console.log("success, data sent")})
    .catch(()=>{console.log("error when sending")})
    )
    
  
   
 */ 

    //this uses try catch however the backend is not getting hit with any data
    //tested this same request in Postman and it works 
    function submitQuestion() { 
      try {
       Axios.post('https://hookahsite-backend.herokuapp.com ' ,
      {
        name:name , 
        email:email , 
        question:question
        
      },
      )
      }
      catch (err) {console.error(err);}
        }
         






     return(
         <React.Fragment>



     <form id="quoteForm" 
     
     >
       <h1 id="quoteTitle">Quote Help Form</h1>
       <p id="quotePar">Please provide your Name, Contact Email, and what products you would like more information about in this form :</p>

   <label id="formName" className="Form">
     Name:
     <input type="text" name="name" 

     onChange={(event) => { setName(event.target.value);}}

     />
   </label>

   <label id="formEmail" className="Form">
     Email:
     <input type="text" name="email" 
     onChange={(event) => { setEmail(event.target.value);
     }}/>
   </label>
   <br/>
   <label id="formQuestion" className="Form" >
     What products would you like to know more about:
     <input type="text" name="help" 
     onChange={(event) => { setQuestion(event.target.value);
     }}/>
   </label>

   <br/>
   <br/>

   <button id="quoteSubmit" type="submit" 

   onClick = 
   {
     submitQuestion
     
   }

   /*
   old way
      {()=>
    
    submitQuestion()
    
  }
  */

   >Submit </button>

   </form>

   ›


         </React.Fragment>

     )
 };

 export default QuoteForm; 

服务器端代码：

请注意，前端的 Try Catch 不会收到要抛出的错误。后端代码也应该发送控制台日志，而不是。现在，如果我通过邮递员发送此内容，则会有一个控制台日志，并且状态为 200

app.post('/' , (req,res) => {
    const {email, name, question} = req.body;
    res.header("Access-Control-Allow-Origin", "*");
    console.log(`Your Email is ${email} and your name is ${name} and your ${question}`);



//MYSQL updating table

pool.query("INSERT INTO customer_questions (name, email, question) VALUES (?,?,?)",
    [name, email, question], (err,res)=> {
        if (err) {
            console.log(err)
        }else {
            res.send('data sent')
        }
        
    }
    );


});

Answer 1

这里有两个选项：

承诺或异步/等待。

它们有不同的优点和缺点我建议您研究它们（阅读文档或查看有关它们的视频）它们基本上是相同的，但方式不同。

此代码未经测试，如有任何语法错误，敬请见谅。

// Promise option 
const funcWithPromise = () => {  
 Axios.post('https://hookahsite-backend.herokuapp.com  || https://localhost:8000 ' , custData)
 .then( (axiosResponse)=> { 
                  // here you can use the data 
                  const submitQuestions = axiosResponse.data;
                  console.log(submitQuestions);
                  })
                  
 .catch((e)=> {console.log(e)})
 
 }
 
 // or using async/await
 const funcWithAsync = async () => {
    try {
        const submitQuestions = await Axios.post('https://hookahsite-backend.herokuapp.com  || https://localhost:8000 ' , custData);
        console.log(submitQuestions);
    }
    catch (e) {
      console.log(e);    
    }
 }