反应-找不到404

8位博尔赫斯

我在/send-email从React向我的端点发出请求时遇到问题我已flask-mail配置为进行异步调用。

这是前端发出请求的方式:

 emailClient(event, index){
  let {clientCount} = this.state;
  var headers = {
      'Content-Type': 'application/json',
      'Access-Control-Allow-Origin': true,
      Authorization: `Bearer ${window.localStorage.authToken}`
    }
  const {userId} = this.props
  const client = this.state.clients[index];
  const data = {
    client: client
  };
  const url = `${process.env.REACT_APP_WEB_SERVICE_URL}/send-email/${userId}`;
  axios.post(url, data, {headers: headers})
    .then((res) => {
      this.setState({
        clientCount: clientCount +1
      });
      console.log(data);
    })
    .catch((err) => {
    });
  };

渲染:

  render() {
    const orders = this.state.clients;
    const { clients, youtube_urls, loadedVideosCount, currentPlayingIndex } = this.state;

    return (
      <div>
        <h1 className="title is-1">Jukebox</h1>
          {this.state.isLoading}
          {
            clients.map((client, index) => {
               /* 
              Obtain preview from state.previews for current artist index 
              */
              const audio = youtube_urls[index]
              /* 
              Render current client data, and corresponding audio url
              */
              return(
                <div key={index}>
                <ul>
                  <li><font color="#C86428">Client: </font><strong><font color="#6f4e37"> { client.name } </font></strong></li>
                  <li><font color="#C86428">Phone: </font><strong><font color="#6f4e37"> { client.phone } </font></strong></li>
                  <li><font color="#C86428">Email: </font><strong><font color="#6f4e37"> { client.mail } </font></strong></li>
                  <li><font color="#C86428">Artist: </font><strong><font color="#6f4e37"> { client.tracks[0].artist } </font></strong></li>
                  <li><font color="#C86428">Track: </font><strong><font color="#6f4e37"> { client.tracks[0].title } </font></strong></li>
                  <ReactPlayer 
                    url={ audio }
                    controls
                    width='50'
                    height='150'
                    onLoaded={() =>
                    this.setState(currentState => ({
                        loadedVideosCount: loadedVideosCount + 1,
                        currentPlayingIndex:
                          loadedVideosCount + 1 === youtube_urls.length ? 0 : -1,
                      }))
                    }
                    onStart={() => this.emailClient(index)} //<--------
                    onEnded={() =>
                    this.setState(currentState => ({
                        currentPlayingIndex: currentPlayingIndex + 1,
                      }))
                    }
                    playing={index === currentPlayingIndex}
                  />
                </ul></div>
              )
            })
          }
      </div>
    )
  };
};

export default Jukebox;

我收到以下错误:

POST http://localhost/send-email/1 404 (Not Found)

端点:

@task_bp.route('/send-email/<user_id>', methods=['GET','POST'])
def send_email(user_id):
   try:
     #business logic
     send_async_email.delay()

     return jsonify(response_object), 200    
   except (exc.IntegrityError, ValueError):
     db.session.rollback()
     return jsonify(response_object), 400

nginx 反向代理配置:

  location /send-email {
    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

services:

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

    ports:
      - 5001:5000
    environment:
      - FLASK_ENV=development
      - APP_SETTINGS=project.config.DevelopmentConfig
      - DATABASE_URL=postgres://postgres:postgres@web-db:5432/web_dev 
      - DATABASE_TEST_URL=postgres://postgres:postgres@web-db:5432/web_test
      - SECRET_KEY=my_precious
      - GOOGLE_APPLICATION_CREDENTIALS=/usr/src/app/project/api/resources/youtube/urls/z.json  
    depends_on:  
      - web-db
      - redis

  client:
    build:
      context: ./services/client
      dockerfile: Dockerfile-dev
    volumes:
      - './services/client:/usr/src/app'
      - '/usr/src/app/node_modules'
    ports:
      - 3000:3000
    environment:
      - NODE_ENV=development
      - REACT_APP_WEB_SERVICE_URL=${REACT_APP_WEB_SERVICE_URL}
    depends_on:
      - web

每次构建它们时,我都会:

 $export REACT_APP_WEB_SERVICE_URL=http://localhost 

有什么问题吗?


注意:

如果我使用POSTMAN to直接发布到端点http://localhost:5001/send-email/1,则可以工作。

8位博尔赫斯

在客户端为我修复5001添加端口localhost:

   const url = `${process.env.REACT_APP_WEB_SERVICE_URL}:5001/send-email/${userId}`;

安慰:

XHR finished loading: OPTIONS "http://localhost:5001/send-email/1".

我仍然不明白为什么,因为所有其他数十个端点都免除5001,但是它是固定的。任何明确原因的答案都将得到赏金。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章