Реакция 404 не найдена - PullRequest
Новая
       27

Реакция 404 не найдена

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

Я делаю POST запрос , который работает , если я использую postman, например так: 

http://localhost:5001/orders/1

Однако пытаюсь получить доступ к конечной точке, используя axios вReact разрывается со следующей ошибкой, отображаемой на консоли: 

xhr.js:155 POST http://localhost/orders/1 404 (Not Found)

dispatchXhrRequest @ xhr.js:155
xhrAdapter @ xhr.js:16
dispatchRequest @ dispatchRequest.js:49
Promise.then (async)
request @ Axios.js:55
Axios.<computed> @ Axios.js:74
wrap @ bind.js:11
handleSubmitOrder @ Pipeline.jsx:49
onSubmit @ Pipeline.jsx:110
callCallback @ react-dom.development.js:363
invokeGuardedCallbackDev @ react-dom.development.js:412
invokeGuardedCallback @ react-dom.development.js:466
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:481
executeDispatch @ react-dom.development.js:614
executeDispatchesInOrder @ react-dom.development.js:639
executeDispatchesAndRelease @ react-dom.development.js:744
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:753
forEachAccumulated @ react-dom.development.js:725
runEventsInBatch @ react-dom.development.js:770
runExtractedPluginEventsInBatch @ react-dom.development.js:916
handleTopLevel @ react-dom.development.js:6171
batchedEventUpdates @ react-dom.development.js:2422
dispatchEventForPluginEventSystem @ react-dom.development.js:6271
dispatchEvent @ react-dom.development.js:6301
unstable_runWithPriority @ scheduler.development.js:674
runWithPriority$2 @ react-dom.development.js:11834
discreteUpdates$1 @ react-dom.development.js:22935
discreteUpdates @ react-dom.development.js:2440
dispatchDiscreteEvent @ react-dom.development.js:6254
12:36:57.220

FRONT

Это форма, которую я использую для созданиязапрос: 

<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>
          <div className="field">
            <input
              name="phone"
              className="input is-dark is-large"
              type="text"
              placeholder="Client phone"
              required
              //value={this.state.formClient.phone}
              onChange={this.handleOrderFormChange}
            />
          </div>
          <div className="field">
            <input
              name="select"
              className="input is-dark is-large"
              type="text"
              placeholder="Coffee ordered by client"
              required
              //value={this.state.formClient.select}
              onChange={this.handleOrderFormChange}
            />
          </div>
          <input
            type="submit"
            className="button is-dark is-large is-fullwidth"
            value="Submit"
            //disabled={!this.state.valid}  
          />
          </form>

и это функция onSubmit(): 

handleSubmitOrder(event) {
    const {userId} = this.props
    const data = {
      client: this.state.formClient.client,
      phone: this.state.formClient.phone,
      email: this.state.formClient.email,
      select: this.state.formClient.select,
    };
    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) => {
      });
  };

BACK 

@orders_bp.route('/orders/<user_id>', methods=['GET','POST'])
def orders(user_id):

Nginx / Docker КОНФИГРИРУЕТ мое приложение, настроенное с помощью nginx, и в dev.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;
  }

и в docker-compose config: 

web:
    build:
      context: ./services/web
      dockerfile: Dockerfile-dev
    volumes:
      - './services/web:/usr/src/app'

    ports:
      - 5001:5000

все остальные запросы ко всем остальным конечным точкам работают без проблем в вышеуказанной конфигурации, кроме этой. что мне не хватает?

Ответы [ 2 ]

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

Если я не ошибаюсь, ваша первая строка в сообщении об ошибке показывает

xhr.js: 155 POST http://localhost/orders/1 404 (Not Found)

В URL отсутствует порт 5001, поэтому я думаю, что значение process.env.REACT_APP_WEB_SERVICE_URL в вашем файле .env тоже не соответствует порту?

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

Проблема была nginx config.

Местоположение /orders было добавлено в файл nginx.dev, но изменения должны были быть распространены снова, а не просто сохранены.

После того, как я это сделал: 

docker-compose -f docker-compose-dev.yml up -d --build

запросов начали работать нормально.

...