Question

我正在发出一个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

前

这是我用来发出请求的表格：

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

返回

@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配置中：

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

    ports:
      - 5001:5000

除上述配置外，

对所有其他端点的所有其他请求在上述配置中均能正常运行。我想念什么？

Answer 1

如果我没记错的话，您是错误消息显示中的第一行

xhr.js：155 POST http://localhost/orders/1 404（未找到）

URL缺少端口5001，所以我猜您的process.env.REACT_APP_WEB_SERVICE_URL文件中的.env的值也缺少端口吗？

Answer 2

问题是nginx配置。

位置/orders已添加到nginx.dev文件中，但是应该重新传播更改，而不仅仅是保存它。

我这样做之后：

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

请求开始正常运行。

未找到React 404

2 个答案: