-1

I have a reactjs as a frontend and flask server as a backend. I'm trying to send data from register form (using Formik). When I do a post request I have an error 500. I notice that when I'm using postman everything is good and flask create new record in postgresql.

frontend is on http://localhost:3000/register, backend is on http://localhost:5002/adduser What I should do now ?

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)
davidism
  • 121,510
  • 29
  • 395
  • 339
Marcin Krysik
  • 65
  • 4
  • 8
  • can you post values? If you get a 500 your server gets the request but there is a problem on it, most probably the data you are sending are not ok. Also can you post the request you send using postman? – F.bernal May 24 '19 at 12:13
  • If I'm using postman everything work, but when I try with react I got an error in console (500). Logs on the server after submitting ```werkzeug.exceptions.HTTPException.wrap..newcls: 400 Bad Request: The browser (or proxy) sent a request that this server could not understand.``` – Marcin Krysik May 24 '19 at 12:42

1 Answers1

1

You can't access to request.form via json Content-type request.

You need to replace

'Content-type': 'application/json'

By

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

Your handleSubmit function will be similar to this:

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))
  }
}
}

Another possible solution is to keep client code without change and access to your data via request.json instead of request.form.

ASSILI Taher
  • 1,210
  • 2
  • 9
  • 11