I went through all the answers above, however, I noticed no one really talked about when you receive data from Client-side (when your client side is of different origin e.g. react app) to Server-side then you also need to handle OPTIONS pre-flight request in Flask to allow Cross-Origin access otherwise CORS error is thrown. After you handle that, then usual process is to use get_json() method on request object. Following is the code that works for me:
@app.route("/read_row_to_customer_sheet", methods=["POST", "OPTIONS"])
def read_row_to_customer_sheet():
if request.method == "OPTIONS":
response = make_response()
response.headers.add("Access-Control-Allow-Origin", "*")
response.headers.add('Access-Control-Allow-Headers', "*")
response.headers.add("Content-Type", "application/json")
return response
elif request.method == 'POST':
form = request.get_json()
print(form)
# your custom logic goes here
response = make_response()
response.headers.add("Access-Control-Allow-Origin", "*")
return response
Also make sure you put request.get_json() in elif block not at the beginning of function. Otherwise you will encounter the CORS error at client-side and possibly 415 error at server side because when you receive the pre-flight OPTIONS request the function will try to decode it as json because you placed the request.get_json() at the beginning, therefore, following control-flow is wrong:
### WRONG Route Function
@app.route("/read_row_to_customer_sheet", methods=["POST", "OPTIONS"])
def read_row_to_customer_sheet():
form = request.get_json()
if request.method == "OPTIONS":
response = make_response()
response.headers.add("Access-Control-Allow-Origin", "*")
response.headers.add('Access-Control-Allow-Headers', "*")
response.headers.add("Content-Type", "application/json")
return response
elif request.method == 'POST':
print(form)
# your custom logic goes here
response = make_response()
response.headers.add("Access-Control-Allow-Origin", "*")
return response