无法在 MERN 中发送 Post 请求

如何解决无法在 MERN 中发送 Post 请求

在我的 MERN 应用程序中，我在将发送发布请求保存到服务器时遇到问题为了保存我使用的数据是 mongo dB Atlas。在我的本地主机中一切正常，但在部署相同的应用程序后，我遇到了这个问题。我不知道这背后的原因，但请先检查我在 contact.js 中的 form 标签 可能会帮助你找到错误。请帮我解决这个问题。

我的 Contact.js 文件（客户端）

import React from 'react';
import Header from '../components/Header';
import axios from 'axios';
class Contact extends React.Component
 {
  constructor(props)
  {
    super(props);
    this.state={
   name:'',email:'',feedback:''
  }
}

del=(event)=>
 {
   var objname=event.target.name;
   var objvalue=event.target.value;
       if(objname==="name")
           this.setState({name:objvalue});
       else if(objname==="email")
           this.setState({email:objvalue});
       else if(objname==="feedback")
           this.setState({feedback:objvalue});

  }


 alertBox=()=>{
      alert('Successfully Submitted');
     }


 detail=()=>{

  console.log("well come back dear!!");
  axios.post("http://127.0.0.1:5000/details",this.state);
   this.alertBox();
   }

 render()
    {
     return(
   <>
     <Header />

     <div className="my-3 pt-4 mx-auto" style={{backgroundColor:'coral'}}>
      <div className="container-fluid" style={{position:'relative',top:'20%',background:'transparent'}}>
              <div className="container pt-5 shadow-lg text-dark" >
                <div className="row"> 
                    <div className="col-sm-6 ">
                        <div><h1><u>My Contacts</u></h1></div>
                        <div>
                        <ul type="none">
                            <li><span>NAME :</span> <h2><i className="far fa-user"> </i> YASHAV KUMAR</h2></li>
                            <li><span>Email :</span> <h2><i className="fas fa-phone"></i> [e-mail]</h2></li>
                            <li><span>ADDRESS :</span> <h2><i className="fas fa-address-card"></i> Kangra (H.P),India</h2></li>
                        </ul>
                          
                        </div>
                    </div>
                    <div className="col-sm-6">
                        <div><h1><u>Please Send Your Feedback!!</u></h1></div>
                        <form action="/" method='GET' onSubmit={this.detail}>

                        <table className="table text-light">
                          <tbody>
                           <tr>
                               <td>
                                  <h1><i className="far fa-user"></i></h1><label>Name </label>
                               </td>
                                <td>
                                 <input className="btn btn-outline-info btn-lg" name="name" type="text" required placeholder="Your Name" onChange={this.del.bind(this)}/>
                                </td>

                           </tr>

                           <tr>
                               <td>
                                 <h1><i className="fas fa-envelope-square"></i></h1>
                                 <label>Email  </label>
                               </td>
                              <td>
                                <input className="btn btn-outline-info btn-lg" name="email" type="email" required placeholder="Your Email" onChange={this.del.bind(this)}/>
                              </td>
                            </tr>
                            <tr>
                              <td>
                               <h1><i className="fas fa-grin-squint"></i></h1>
                               <label>Your Suggestions </label>
                              </td>
                              <td>
                               <textarea className="btn btn-outline-info btn-lg" name="feedback" type="text"placeholder="Your text here" height="140px" required onChange={this.del.bind(this)}></textarea>
                              </td>
                            </tr>

                            <tr>
                               <td>
                                 <input className="btn btn-outline-primary btn-secondary btn-lg" type="submit" name="submit"/>
                               </td>
                               <td>
                                 <input className="btn btn-outline-primary btn-secondary btn-lg" type="reset" name="Reset"/>
                                </td>
                            </tr>

                            </tbody>
                        </table>
                        </form>
                    </div>
                </div>
            
            </div>
            
        </div>
    </div>
   </>
)
 }

 }

export default Contact;

我的 App.js（服务器端）

 app.post("/details",(req,res)=>{

      res.json({msg:"Good work buddy"});
      const {name,email,feedback}=req.body;

  const object=new Reviews(
   {
 _id:new mongoose.Types.ObjectId,Name:name,Email:email,Feedback:feedback,});
  object.save()
     .then(
        (response)=>{
             console.log(response);
          }
        )
     .catch((err)=>{
         console.log(err);
         res.status(500).json({msg:"Please recheck the data"})
        })

  res.end();
      })

---

更多项目访问：- https://react-website-liart.vercel.app/（客户）
https://yashavreact.herokuapp.com/reviewdata（服务器）

enter image description here

感谢您查看我的代码。