使用 axios 提交表单并调用 node.js

Question

我有这个页面，它的作用是在表单提交时使用 axios 调用后端函数/updateServices。

 import '../../../styles/services.css';
    import axios from 'axios'
    import React, { Component } from 'react';
    
    class AddServicesPage extends Component {
        constructor(props) {
          super(props);
      
          this.state = {
            siteLocation: '',
            Services: '',
            date: '',
            cnum: ''
          };
        }
      
        handleInputChange = e => {
          this.setState({
            [e.target.name]: e.target.value,
          });
        };
      
        handleSubmit = e => {
          e.preventDefault();
      
          var date = Date().toLocaleString()
          const { siteLocation, Services, cnum } = this.state;
      
          const selections = {
            site: siteLocation,
            content: Services,
            updatedByCNUM: cnum,
          };
      
          axios
            .post(`/updateServices`, selections) 
              .then(() =>
                      console.log("updating"),
                      window.location = "/admin/services"
              )
              .catch(function(error) {
                  // alert(error)
                  window.location = "/admin/services/new"
              })
        };
      
      
    
        render() {
        return (
            <div className="App">
               <div id="form-main">
                <div id="form-div">
                <form onSubmit={this.handleSubmit} className="form">
                      
                    <select name="siteLocation" id="siteLocation" onChange={this.handleInputChange} >
                        <option value="OTT">Ottawa</option>
                        <option value="MAR">Markham</option>
                    </select>
    
                    <p className="email">
                        <input name="Services" type="text" className="validate[required,custom[email]] feedback-input" id="Services" placeholder="Services" onChange={this.handleInputChange} />
                    </p>
                  
                   <p className="cnum">
                        <input name="cnum" type="text" className="validate[required,custom[email]] feedback-input" id="cnum" placeholder="cnum" onChange={this.handleInputChange} />
                    </p>
                    
                    
                    
                    <div className="submit">
                        <input type="submit" value="SEND" id="button-blue"/>
                        <div className="ease"></div>
                    </div>
                    </form>
                    <a href="/tour">Get Results{'->'}</a>
                </div>
            </div>
            </div>
        );
        }
    }
    
    export default AddServicesPage;

然而，它甚至没有击中表单提交的后端，而是跳过它并转到.then 说它正在工作。在后端，在我的/updateServices 中，它甚至不记录任何内容。它什么也不记录，甚至没有空行，这意味着它永远不会到达后端。我的代码有什么问题吗？

Answer 1

您似乎没有正确设置axios 调用中的路径。

您调用/updateServices 时没有指向任何域。

axios.post(`/updateServices`, selections) 

您应该传递一个域，然后传递一个路由。例如，如果您的后端在 localhost 的 5000 端口上运行，那么您的调用应该如下所示

axios.post(`http://localhost:5000/updateServices`, selections) 

如果您想以必须在代码中输入的方式使用 axios，您可以像下面的示例那样进行：

const backend = axios.create({baseURL: 'http://localhost:5000'});
backend.post(`/updateServices`, selections)

如果我必须对同一个域进行多次调用，我会使用这种模式。另外，我会将axios create 放在一个单独的文件中，并在需要的地方从那里导入。