React 和 axios - 发送 GET 和 POST 请求，而不仅仅是 POST

Question

In React I have this form being submitted:

<form onSubmit={ (event) => this.handleSubmitOrder(event) }>
          <div className="field">
             <input
                name="client"
                className="input is-dark is-large"
                type="text"
                placeholder="Client name"
                required
                //value={this.state.formClient.client}
                onChange={this.handleOrderFormChange}
              /> 
          </div>
            <div className="field">
              <input
                name="email"
                className="input is-dark is-large"
                type="text"
                placeholder="Client email"
                required
                //value={this.state.formClient.email}
                onChange={this.handleOrderFormChange}
              />
            </div>
          <input
            type="submit"
            className="button is-dark is-large is-fullwidth"
            value="Submit"
          />
          </form>

This is handleSubmitOrder() , handling a POST request:

  handleSubmitOrder(event) {
    const {userId} = this.props
    const data = {
      client: this.state.formClient.client,
      email: this.state.formClient.email,
    };
    var headers = {
        'Content-Type': 'application/json',
        //'Access-Control-Allow-Origin': true,
        Authorization: `Bearer ${window.localStorage.authToken}`
      }
    const url = `${process.env.REACT_APP_WEB_SERVICE_URL}/orders/${userId}`;
    axios.post(url, data, {headers: headers})
      .then((res) => {
        console.log(data);
      })
      .catch((err) => {
      });
  };

I use nginx as proxy server (nginx.conf):

  location /orders {
    proxy_pass        http://web:5000;
    proxy_redirect    default;
    proxy_set_header  Upgrade $http_upgrade;
    proxy_set_header  Connection "upgrade";
    proxy_set_header  Host $host;
    proxy_set_header  X-Real-IP $remote_addr;
    proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header  X-Forwarded-Host $server_name;
  }

and at my Flask server, I have my view, specifically declaring POST method only:

@orders_bp.route('/orders/<user_id>', methods=['POST'])
def orders(user_id):
    # business logic
    return jsonify(response_object), 200

This endpoint is being reached alright, and logic at /orders is being successfully processed.

But when I submit the form, I'm getting a 404 error at browser, and, to my confusion, a GET request:

"GET /orders?client=Ozorio&email=ozo%40gmail.com&phone=118888888&select=pick HTTP/1.0" 404 -

In case it helps, I also have url declared here:

App.jsx:

<Route exact path='/orders' render={() => (
   <Orders
     formType={'Orders'}
     isAuthenticated={this.state.isAuthenticated}
    />
)} />

and here at navbar, where I ask for the url:

    {props.isAuthenticated &&
   <Link to="/orders" className="navbar-item">Orders</Link>
    }

note: I am authenticated.

---

What could be wrong here?

Answer 1

The way forms behave by default is rather interesting. You can read more about it here

At the end of the day you need to add

event.preventDefault()

at the top of you handleSubmitOrder function (to prevent the default behavior of submitting a form)