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

Question

在React中，我正在提交此表单：

<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>

这是handleSubmitOrder()，正在处理POST请求：

  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) => {
      });
  };

我使用nginx作为代理服务器（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;
  }

并且在我的Flask服务器上，我有自己的看法，只声明了POST方法：

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

已正确到达此端点，并且已成功处理/orders处的逻辑。

但是，当我提交表单时，浏览器出现404错误，并且令我感到困惑的是GET请求：

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

如果有帮助，我也在这里声明了网址：

App.jsx：

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

以及在navbar的这里，我要求输入URL：

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

注意：我已通过身份验证。

---

这里可能出什么事了？任何帮助，不胜感激。

Answer 1

您需要添加