React and axios - отправка запросов GET и POST вместо только POST - PullRequest
Новая
       18

React and axios - отправка запросов GET и POST вместо только POST

1 голос
/ 09 ноября 2019

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

В случае, если это поможет, у меня также есть URL-адрес, объявленный здесь:

App.jsx: 

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

и здесь, на панели навигации, где япопросите URL: 

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

примечание: я аутентифицирован.

Что здесь может быть не так? Любая помощь высоко ценится.

1 Ответ

0 голосов
/ 09 ноября 2019

То, как формы ведут себя по умолчанию, довольно интересно. Вы можете прочитать больше об этом здесь

В конце дня вам нужно добавить

event.preventDefault()

наверху вас handleSubmitOrder функция (чтобы предотвратить отправку формы по умолчанию)

...