我无法将帖子请求从 react 表单发送到烧瓶服务器 [重复]

Question

我有一个reactjs作为前端，flask服务器作为后端。我试图从注册表中发送数据（使用Formik）。当我做一个post请求时，我有一个错误500。我注意到当我使用postman时，一切都很好，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 Content-type请求访问request.form。

你需要更换

'Content-type': 'application/json'

通过

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

您的句柄提交函数将类似于以下内容：

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访问您的数据。