React 前端无法 POST 到 Flask 后端

Question

我正在使用 React 构建一个 RESTful Flask 应用程序。我正在尝试：

1. 通过 React 组件渲染我的 Jinja2 模板

2. 将数据从 React 组件发送回 Flask，服务器端

---

我正在使用 Axios 来处理请求。这是我到目前为止的代码：

import React, { Component } from 'react';
//import ReactHtmlParser, { processNodes, convertNodeToElement, htmlparser2 }
//from 'react-html-parser';
import axios from 'axios';


class Seeds extends Component{
  constructor (props) {
    super(props);
    this.state = {
      email: '',
      id: '',
      username: '',
      active: '',
      admin: '',
      template:'',
      input:''    
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  };
  componentDidMount() {
    if (this.props.isAuthenticated) {
      this.getSeeds();
    }
  };
  getSeeds(event) {
    const options = {
      url: `${process.env.REACT_APP_WEB_SERVICE_URL}/seeds`,
      method: 'get',
      headers: {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${window.localStorage.authToken}`
      }
    };
    return axios(options)
    .then((res) => {
      console.log(res.data.data)
      this.setState({
        template: res.data.data[0].content
      })
    })    
    .catch((error) => { console.log(error); });
  };
  handleChange(event){
        this.setState({ input: event.target.value });
    }
  handleSubmit(event) {
    event.preventDefault();
    const data = {
      input: this.state.input,
    };

    const url = `${process.env.REACT_APP_WEB_SERVICE_URL}/handle_seeds`;
    axios.post(url, data)
      .then((res) => {
        console.log(data);
      })
      .catch((err) => {
      });
    };

    render(){

        //var seeds_page = this.state.template;
        var __html = this.state.template;
        var template = { __html: __html };

        return (
            <div dangerouslySetInnerHTML={template}/>
        );
    }
}

export default Seeds;

---

模板被渲染，我 GET 数据使用这个配置，但我不知道 POST 数据如何从渲染的 <forms> 做后端。

我试过了：

render(){
    var __html = this.state.template;
    var template = { __html: __html };

    return (
         <div id="parent">
           <div dangerouslySetInnerHTML={template}/>
            <form onSubmit={this.handleSubmit}>
             <input type='text' name='name' onChange={this.handleChange}/><br/>
             <input type='submit' value='Submit'/>
            </form>
        </div>
    );
}

---

Flask路由：

@seeds_bp.route('/handle_seeds', methods=['GET','POST'])
def handle_seeds():

  user = User.query.filter_by(id=1).first()

  if request.method == 'POST':
    if 'input' in request.form:
        inp = request.form['input']
        user.input = inp
        db.session.commit()

        return redirect(url_for('seeds.seeds'))

---

我的 Docker 服务（前端和后端）正在使用 Nginx 反向代理，并且我已将其添加到 dev.conf：

  location /handle_seeds {
    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;
  }

但我只是进入浏览器：

Cannot POST /handle_seeds

我该如何解决这个错误？

Answer 1

根据您的代码，当您单击提交按钮时，其提交表单会带有浏览器提交操作，

所以它访问了浏览器base_url/handle_seeds，这就是它抛出这个错误的原因，

使用此代码，它应该可以工作。

 <div id="parent">
           <div dangerouslySetInnerHTML={template}/>
            <form>
             <input type='text' name='name' onChange={this.handleChange}/><br/>
             <button type="button" onClick={this.handleSubmit} />
           </form>
 </div>