Question

我有一个reactjs作为前端，而flask服务器作为后端。我正在尝试从注册表格（使用Formik）发送数据。当我发布请求时，出现错误500。我注意到，当我使用邮递员时，一切都很好，flask在postgresql中创建了新记录。

前端在http://localhost:3000/register上，后端位于http://localhost:5002/adduser上我现在该怎么办？

function handleSubmit(values, actions) {

  const options = {
    headers: {
      'Content-type': 'application/json',
      'Access-Control-Allow-Origin': '*',
      'Referrer-Policy': 'origin-when-cross-origin'
    },
    method: 'POST',
    mode: 'no-cors',
    body: JSON.stringify(values)
  }

fetch('http://localhost:5002/adduser', options)
    .then(response => console.log(response))
    .catch(error => console.error(error))
}

@app.route('/adduser', methods=['GET', 'POST'])
def register():
  if request.method == "POST":
    print(request.form['userName'])
    print(request.form['email'])
    data = {
      'name': request.form['userName'],
      'surname': request.form['surname'],
      'email': request.form['email'],
      'user_password': request.form['password'],
      'phone_number': request.form['phoneNumber']
    }
    mydb = Database(host=os.getenv('host'), database=os.getenv('database'), user=os.getenv('user'), password=os.getenv('password'))
    mydb.insert_data(data)

    return jsonify({'mydata': data})

    # name = request.form['name']
    # surname = request.form['surname']
    # email = request.form['email']
    # password = request.form['password']
    # phone_number = request.form['phoneNumber']
  return "<h1>Hello Flask</h1>"

if __name__ == "__main__":
    app.run(debug=True, port=5002)
    app.secret_key = os.urandom(24)

Answer 1

您无法通过json内容类型请求访问request.form。

您需要更换

'Content-type': 'application/json'

通过

'Content-Type': 'multipart/form-data'

您的handleSubmit函数将与此类似：

function handleSubmit(values, actions) {

let options = {
    headers: {
      'Content-Type': 'multipart/form-data'
    },
    method: 'POST'
  };

  options.body = new FormData();
  for (let key in values) {
    options.body.append(key, values[key]);
  }

  fetch('http://localhost:5002/adduser', options)
    .then(response => console.log(response))
    .catch(error => console.error(error))
  }
}
}

另一种可能的解决方案是保持客户端代码不变，并通过request.json而不是request.form访问数据。

我无法将发帖请求从React表单发送到Flask服务器

1 个答案: