我无法将发布请求从反应表单发送到烧瓶服务器 [重复]

Question

我有一个 reactjs 作为前端，flask 服务器作为后端。我正在尝试从注册表单发送数据（使用 Formik）。当我进行发布请求时，出现错误 500。 我注意到当我使用邮递员时，一切都很好，并且烧瓶在 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 访问您的数据。